kendo grid programmatically deselect a row

[Balaji]

Hi ,

I create multiple kendo-grid in a for loop based on the data retrieved from the data source.  Lets assume we have only two grid created by the for loop. 

What I am trying to achieve is to deselect all the rows from the first grid when a row is selected in a second grid.

Setting the selectedIndex = -1  for previous grid and removing the class removes the class , but that row is still not selectable in the grid one.

If you look at any grid examples in StackBliz, we have to manually doa CTL+Click to unselect that row.

How can we mimic the  clicking of Clt+Click  rpogrammatically so kendo does not think that row is already clicked.t

const previousSelectedRow: HTMLCollection = this.grids[this.previousIndex]?.grid.ariaRoot.nativeElement.getElementsByClassName('k-state-selected')[0];
      if (previousSelectedRow) {
        this.renderer.removeClass(previousSelectedRow, 'k-state-selected');
        this.renderer.removeClass(previousSelectedRow, 'selected');
      }

 

Thanks

[Dimiter Topalov]

Hello Balaji,

The recommended approach for controlling the Grid selection programmatically is to use the Selection directive alongside a list of selected keys (selectedKeys):

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

https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting/#toc-by-a-dataitem-field

This way when an item is selected in one of the Grids, the arrays bound to the selectedKeys input of the other Grids could be set to an empty array, for example:

https://stackblitz.com/edit/angular-awn3s2?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Balaji]

Hi Dimiter,

Thank you so much for your prompt response. This is what I was looking for. Really helpful.

Regards,

Balaji