Kendo Grid工具栏模板dataItem传递undefined的原因及可行方案

问题现象 #

在Kendo Grid的单元格模板中使用let-dataItem能正常获取行数据，但在工具栏模板里同样声明let-dataItem并传递给点击函数时，控制台打印的dataItem却是undefined。

原因分析 #

Kendo Grid的不同模板上下文完全不同：

• kendoGridCellTemplate是行级渲染模板，Grid在渲染每一行时，会自动将当前行的数据绑定到模板的dataItem变量上，所以let-dataItem能直接拿到当前行实体。
• kendoGridToolbarTemplate是全局工具栏模板，它属于Grid的全局上下文，并不绑定任何单个行的数据——你在模板里声明的let-dataItem没有被Grid赋值，自然会是undefined。

解决方案 #

如果要实现点击工具栏按钮获取选中行数据的需求，不能用当前的方式，必须借助Grid的选择相关功能，有两种常用实现方式：

方式1：通过Grid模板引用直接获取选中项 #

修改HTML代码，给Grid添加模板引用变量，点击时直接通过API获取选中数据：

<kendo-grid #grid [data]="gridData" [selectable]="true">
    <kendo-grid-column field="date" title="Date">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.date| date: 'dd-MM-yyyy HH:mm'}}
      </ng-template>
    </kendo-grid-column>
    
    <ng-template kendoGridToolbarTemplate [position]="'bottom'">
        <button class="downloadButton" (click)="onClick($event, grid.selectedDataItems)" kendoButton>Download</button>
    </ng-template>  
</kendo-grid>

组件代码修改：

public onClick(e: Event, selectedItems: Project[]): void {
    e.preventDefault();
    console.log(e);
    console.log(selectedItems); // 获取到所有选中的行数据
}

方式2：通过选择事件维护选中项 #

给Grid绑定selectionChange事件，实时维护选中行的变量，点击时直接使用该变量：

<kendo-grid [data]="gridData" [selectable]="true" (selectionChange)="onSelectionChange($event)">
    <kendo-grid-column field="date" title="Date">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.date| date: 'dd-MM-yyyy HH:mm'}}
      </ng-template>
    </kendo-grid-column>
    
    <ng-template kendoGridToolbarTemplate [position]="'bottom'">
        <button class="downloadButton" (click)="onClick($event)" kendoButton>Download</button>
    </ng-template>  
</kendo-grid>

组件代码修改：

selectedItems: Project[] = [];

// 监听选择变化，更新选中项
onSelectionChange(event: SelectionEvent) {
  this.selectedItems = event.selectedItems;
}

public onClick(e: Event): void {
    e.preventDefault();
    console.log(e);
    console.log(this.selectedItems); // 使用维护的选中项变量
}

总结 #

工具栏模板不存在行级dataItem上下文，无法直接通过let-dataItem获取行数据，必须通过Grid的选择API或selectionChange事件来获取选中的行数据。

内容的提问来源于stack exchange，提问作者B.Quaink