Kendo angular ng-template 中的网格列传递数据项
Kendo angular grid column pass dataitem in ng-template
我正在使用 Angular 5.2 和 Kendo 控件。在网格内,我有一个单击 属性 的按钮。我想将 PID 值作为参数 传递给 showwindow 函数。
这是代码示例:-
<kendo-grid [data]="gridView"
(pageChange)="pageChange($event)"
[selectable]="true"
[kendoGridSelectBy]="mySelectionKey"
[selectedKeys]="mySelection"
style="width:1100px;">
<kendo-grid-checkbox-column showSelectAll="true" width="50" media="(min-width: 10px)">
<ng-template kendoGridHeaderTemplate let-dataItem>
<input type="checkbox"
name="selectAll"
(change)="selectAllRows($event)"
[checked]="allRowsSelected" />
</ng-template>
</kendo-grid-checkbox-column>
<kendo-grid-column field="PID" title="User ID" width="150" media="(min-width: 10px)">
</kendo-grid-column>
<kendo-grid-command-column title="View file" width="200" media="(min-width: 10px)">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button (click)="showwindow(pass the PID value here)">
<img src="../../../../../Images/view.png" />
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
这是我要更改的按钮单击处理程序:-
<button (click)="showwindow(pass the PID value here)">
<img src="../../../../../Images/view.png" />
</button>
请提出解决方案。
您可以通过 kendoGridCellTemplate
指令的模板上下文访问当前行 dataItem
(和其他变量)。 (API Reference)
<kendo-grid-command-column ...>
<ng-template kendoGridCellTemplate let-dataItem>
<button (click)="showwindow(dataItem.PID)">
<img src="../../../../../Images/view.png" />
</button>
</ng-template>
</kendo-grid-command-column>
我正在使用 Angular 5.2 和 Kendo 控件。在网格内,我有一个单击 属性 的按钮。我想将 PID 值作为参数 传递给 showwindow 函数。
这是代码示例:-
<kendo-grid [data]="gridView"
(pageChange)="pageChange($event)"
[selectable]="true"
[kendoGridSelectBy]="mySelectionKey"
[selectedKeys]="mySelection"
style="width:1100px;">
<kendo-grid-checkbox-column showSelectAll="true" width="50" media="(min-width: 10px)">
<ng-template kendoGridHeaderTemplate let-dataItem>
<input type="checkbox"
name="selectAll"
(change)="selectAllRows($event)"
[checked]="allRowsSelected" />
</ng-template>
</kendo-grid-checkbox-column>
<kendo-grid-column field="PID" title="User ID" width="150" media="(min-width: 10px)">
</kendo-grid-column>
<kendo-grid-command-column title="View file" width="200" media="(min-width: 10px)">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button (click)="showwindow(pass the PID value here)">
<img src="../../../../../Images/view.png" />
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
这是我要更改的按钮单击处理程序:-
<button (click)="showwindow(pass the PID value here)">
<img src="../../../../../Images/view.png" />
</button>
请提出解决方案。
您可以通过 kendoGridCellTemplate
指令的模板上下文访问当前行 dataItem
(和其他变量)。 (API Reference)
<kendo-grid-command-column ...>
<ng-template kendoGridCellTemplate let-dataItem>
<button (click)="showwindow(dataItem.PID)">
<img src="../../../../../Images/view.png" />
</button>
</ng-template>
</kendo-grid-command-column>