Angular Kendo Grid：以编程方式选择行

Posted 2023-05-07

【中文标题】Angular Kendo Grid：以编程方式选择行

【英文标题】：Angular Kendo Grid: Select Row Programatically

【发布时间】：2020-11-08 12:57:03

【问题描述】：

如何以编程方式选择 Angular Kendo Grid 行？不是通过用户界面，而是通过选择功能。例如，有没有办法以编程方式选择第三行？

目前使用 Angular 10

资源：

https://www.telerik.com/kendo-angular-ui/components/grid/

【问题讨论】：

你能测试解决方案吗？

【参考方案1】：

您需要将输入[selectedKeys] 提供给剑道网格，您必须在该网格中提供您希望在加载网格时选择的行的索引数组。 如果稍后您想更改或更新选定的行，则可以相应地更新 selectedKeys 的数组。

Kendo 在这里提供了一个演示-https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-during-data-operations

【参考方案2】：

解决方案 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 动态设置它，以后任何人都可以更改选择，但您的问题没有提到保留选择，所以这个链接应该结束讨论

https://stackblitz.com/edit/angular-10-decatechlabs

【讨论】：

嗨，肖恩，也请在这两个链接中发布您的答案，由于某种原因，没有人提供更新的答案，谢谢***.com/questions/43581367/…***.com/questions/40051846/…

另一个问题是，它卡在我的行上，我怎样才能修改它不卡住，我希望它设置一次，然后让用户继续在多选网格中选择项目，关键是数据选择不会卡住

@marksmith542 好的，我会调查您的其他问题。当你的意思是卡住时，确保我理解正确，你能解释一下吗？您的意思是在第一页加载时您希望仅预先选择行。你能正确解释一下，这样我就不会在这里和那里浪费你的时间并正确地指导你。

当我的意思是卡住时，我无法在用户界面中取消选择上面代码中使用的行

这应该适用于您卡住的情况。您可以使用 selectionKeys 动态设置它，以后任何人都可以更改选择，但您的问题没有提到保留选择，所以这个链接应该结束讨论。 stackblitz.com/edit/angular-10-decatechlabs