Search code examples
angulartypescriptkendo-uitelerikkendo-grid

Angular Kendo Grid: Select Row Programatically


How do I programatically select an Angular Kendo Grid row? Not by user interface, but by a selection functioin. Eg, is there way to programatically select the third row?

Currently using Angular 10

Resource:

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


Solution

  • Solution 1:

    Kendo provide a way to Programmatically select the row. you can use the event rowSelected

    It is Defines a Boolean function that is executed for each data row in the component and it determines whether the row will be selected.

    <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;
    

    Here is the link with running demo and good explaination using Angular 10.

    Kendo-grid: Select Row Programatically using Angular

    https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-setting-the-selected-rows

    Solution 2:

    You can make use of selectionKeys to set it dynamically and later any one can change selection but your question does not mention preserving the selection so this link should end the discussion

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