使用 Angular 中的自定义按钮从 Kendo Grid 获取 DataItem答案

【问题标题】：Get DataItem from Kendo Grid with custom button in Angular使用 Angular 中的自定义按钮从 Kendo Grid 获取 DataItem
【发布时间】：2018-09-16 23:45:58
【问题描述】：

我正在尝试将数据项从剑道网格传递到 Angular 6 上的组件。设置如下。

<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>

当我点击编辑或删除数据项时，我看到了数据项。但是，当我单击“工作”时，getCustomerJobs 将 dataItem 返回为“未定义”。

提前感谢您的帮助。

【问题讨论】：

标签： angular kendo-ui kendo-grid dataitem

【解决方案1】：

我相信你很接近。问题在于 kendo-grid-column 上的标记。

改变这个（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>

至此（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>

【讨论】：

谢谢！试过这个，我仍然遇到同样的问题。我尝试过像这样<kendo-grid [data]="view | async" [height]="533" (dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (remove)="removeHandler($event)" (add)="addHandler($event)" [selectable]="true" (selectionChange)="selectedRowChange($event)" > 使整行可选，我也对此未定义。
看看我创建的 Stackblitz 示例是否有帮助。我采用了您提供的代码，使用 Kendo 文档将其包装在 Stackblitz 示例中，当触发 getCustomerJobs() 时，控制台正在写入 dataItem：stackblitz.com/edit/angular-wkugkx
感谢这工作。我想当我可以得到整个对象时，我正在尝试使用 dataItem，就像你一样。从那里我可以找出 selectedItem。