Kendo-grid Select Row Programatically using Angular

In this article we are going to learn how to kendo-grid select row Programatically using Angular 10 version.

Before Jumping into copying and running the code it is imperative that we understand the concept on how we are going to accomplish it.

Let’s Look into telerik kendo-ui documentation , so we found out that we can use event exposed by kendo-grid api

rowSelected

It Defines a Boolean function that is executed for each data row in the component and it determines whether the row will be selected or not. we can make use of this kendo-grid api function to select row programatically.

import { Component } from '@angular/core';
import { products } from './products';
import { RowArgs } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
            [data]="gridData"
            [height]="500"
            [selectable]="true"
            [rowSelected]="isRowSelected"
            >
            <kendo-grid-column field="ProductName" title="Product Name" [width]="300"></kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
            <kendo-grid-column field="UnitsOnOrder" title="Units On Order"></kendo-grid-column>
            <kendo-grid-column field="ReorderLevel" title="Reorder Level"></kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    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;
}

In the code above you can see line 1,3 and 5 selected.

If you found this article to be helpfull please do leave comment and share.

Bonus :

For your convenience Now Let’s Look into the running demo code below.

https://stackblitz.com/edit/angulartoupgrade10

Please don’t forget to leave comment and share this article so you can help others.