kendo grid programmatically deselect a row

1 Answer 19 Views
Grid
Balaji
Top achievements
Rank 1
Balaji asked on 23 Sep 2021, 03:20 PM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 27 Sep 2021, 08:13 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Balaji
Top achievements
Rank 1
commented on 27 Sep 2021, 01:13 PM

Hi Dimiter,

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

Regards,

Balaji

Tags
Grid
Asked by
Balaji
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or