【发布时间】:2020-11-08 12:57:03
【问题描述】:
如何以编程方式选择 Angular Kendo Grid 行?不是通过用户界面,而是通过选择功能。例如,有没有办法以编程方式选择第三行?
目前使用 Angular 10
资源:
【问题讨论】:
-
你能测试解决方案吗?
标签: angular typescript kendo-ui telerik kendo-grid
如何以编程方式选择 Angular Kendo Grid 行?不是通过用户界面,而是通过选择功能。例如,有没有办法以编程方式选择第三行?
目前使用 Angular 10
资源:
【问题讨论】:
标签: angular typescript kendo-ui telerik kendo-grid
您需要将输入[selectedKeys] 提供给剑道网格,您必须在该网格中提供您希望在加载网格时选择的行的索引数组。
如果稍后您想更改或更新选定的行,则可以相应地更新 selectedKeys 的数组。
Kendo 在这里提供了一个演示-https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-during-data-operations
【讨论】:
解决方案 1:
Kendo 提供了一种以编程方式选择行的方法。您可以使用事件 rowSelected
它定义了一个布尔函数,对组件中的每个数据行执行,它决定是否选择该行。
<kendo-grid
[data]="gridData"
[height]="500"
[selectable]="true"
[rowSelected]="isRowSelected"
>
public gridData: any[] = products;
public mySelection: any[] = [1, 3, 5];
// Use an arrow function to capture the 'this' execution context of the class.
public isRowSelected = (e: RowArgs) => this.mySelection.indexOf(e.dataItem.ProductID) >= 0;
这里是 running demo 的链接和使用 Angular 10 的良好解释。
Kendo-grid: Select Row Programatically using Angular
https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-setting-the-selected-rows
解决方案 2:
您可以使用 selectionKeys 动态设置它,以后任何人都可以更改选择,但您的问题没有提到保留选择,所以这个链接应该结束讨论
【讨论】: