使用 Angular 中的自定义按钮从 Kendo Grid 获取数据项 [英] Get DataItem from Kendo Grid with custom button in Angular
本文介绍了使用 Angular 中的自定义按钮从 Kendo Grid 获取数据项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将数据项从剑道网格传递到 Angular 6 上的组件.设置如下.
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>
当我点击编辑或删除数据项时,我会看到数据项.但是,当我点击Jobs"时,getCustomerJobs 将 dataItem 返回为undefined".
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".
预先感谢您的帮助.
推荐答案
我相信你已经很接近了.问题在于 kendo-grid-column 上的标记.
I believe you are close. The problem is the markup on the 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>
这篇关于使用 Angular 中的自定义按钮从 Kendo Grid 获取数据项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文