【问题标题】:Angular Kendo Grid: Select Row ProgramaticallyAngular Kendo Grid:以编程方式选择行
【发布时间】:2020-11-08 12:57:03
【问题描述】:

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

目前使用 Angular 10

资源:

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

【问题讨论】:

  • 你能测试解决方案吗?

标签: angular typescript kendo-ui telerik kendo-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

    【讨论】:

    • 嗨,肖恩,也请在这两个链接中发布您的答案,由于某种原因,没有人提供更新的答案,谢谢stackoverflow.com/questions/43581367/…stackoverflow.com/questions/40051846/…
    • 另一个问题是,它卡在我的行上,我怎样才能修改它不卡住,我希望它设置一次,然后让用户继续在多选网格中选择项目,关键是数据选择不会卡住
    • @marksmith542 好的,我会调查您的其他问题。当你的意思是卡住时,确保我理解正确,你能解释一下吗?您的意思是在第一页加载时您希望仅预先选择行。你能正确解释一下,这样我就不会在这里和那里浪费你的时间并正确地指导你。
    • 当我的意思是卡住时,我无法在用户界面中取消选择上面代码中使用的行
    • 这应该适用于您卡住的情况。您可以使用 selectionKeys 动态设置它,以后任何人都可以更改选择,但您的问题没有提到保留选择,所以这个链接应该结束讨论。 stackblitz.com/edit/angular-10-decatechlabs
    猜你喜欢
    • 1970-01-01
    • 2018-01-23
    • 2017-09-20
    • 2019-03-21
    • 2020-01-27
    • 1970-01-01
    • 1970-01-01
    • 2018-02-14
    • 2020-02-08
    相关资源
    最近更新 更多