1

I am trying to pass the dataItem from a kendo grid to a component on Angular 6. Set up as follows.

<kendo-grid
      [data]="view | async"
      [height]="533"
      (dataStateChange)="onStateChange($event)"
      (edit)="editHandler($event)" (remove)="removeHandler($event)"
      (add)="addHandler($event)"
    >
    <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add new</button>
    </ng-template>
    <kendo-grid-column field="Id" title="ID"></kendo-grid-column>
    <kendo-grid-column field="Name" title="Company Name"></kendo-grid-column>
    <kendo-grid-column field="BillingInfo.BillingGroup" title="Group"></kendo-grid-column>
    <kendo-grid-column field="DefaultProcessingLocation" title="Default Location"></kendo-grid-column>
    <kendo-grid-column field="BillingInfo.BillingCode" title="Code"></kendo-grid-column>
    <kendo-grid-command-column title="Action" width="300">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoGridEditCommand [primary]="true">Edit</button>
            <button kendoGridRemoveCommand>Delete</button>
            <button (click)="getCustomerJobs(dataItem)">Jobs</button>
        </ng-template>
    </kendo-grid-command-column>
  </kendo-grid>

  <app-edit-customer [model]="editDataItem" [isNew]="isNew"
  (save)="saveHandler($event)"
  (cancel)="cancelHandler()">
</app-edit-customer>

When I click on edit or delete the dataItem I see the dataItem. However when I click on "Jobs" the getCustomerJobs returns dataItem as "undefined".

Thanks in advance for the help.

David Andrews
  • 71
  • 2
  • 8

1 Answers1

3

I believe you are close. The problem is the markup on the kendo-grid-column.

Change this (kendo-grid-command-column) ...

 <kendo-grid-command-column title="Action" width="300">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoGridEditCommand [primary]="true">Edit</button>
        <button kendoGridRemoveCommand>Delete</button>
        <button (click)="getCustomerJobs(dataItem)">Jobs</button>
    </ng-template>
</kendo-grid-command-column>

To This (kendo-grid-column)..

 <kendo-grid-column title="Action" width="300">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoGridEditCommand [primary]="true">Edit</button>
        <button kendoGridRemoveCommand>Delete</button>
        <button (click)="getCustomerJobs(dataItem)">Jobs</button>
    </ng-template>
</kendo-grid-column>
Rod
  • 353
  • 2
  • 9
  • Thanks! Tried this and I still get the same issue. I have tried making the entire row selectable like this `` I also get undefined on this too. – David Andrews Sep 17 '18 at 12:32
  • 1
    See if the Stackblitz example I created helps. I took the code you provided, wrapped it in a Stackblitz example using the Kendo documentation, and when getCustomerJobs() is fired the console is writing dataItem: https://stackblitz.com/edit/angular-wkugkx – Rod Sep 17 '18 at 16:24
  • Thanks this works now. I guess I was trying to the dataItem when i could get the whole object, as you do. From there I can figure out the selectedItem. – David Andrews Sep 17 '18 at 21:01