This is a migrated thread and some comments may be shown as answers.

Grid selection get out of sync with filtering/sorting

1 Answer 484 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ján asked on 04 Aug 2017, 06:51 AM

Hello,

we are using Kendo UI for Angular 2 and we have an issue with grid selection. We are hooked to selectionChange event to keep track of selected item.

When an item is selected in a grid the event fires and we know what was selected/deselected, thats fine. The problem is that when grid is filtered/sorted the underlying items change, but the selection stays. For example - the first row is selected, then the grid is sorted - in grid still the first row is highlighted, although it now contains completely different item and there is currently no way of knowing what item it is as selectioChange event is not fired. So our selected item is out of sync with UI presentation.

I believe that the selection should be cleared when filtering/sorting or selectionChange event should fire if different item not occupies the spot. But currently there is no way of doing any of those things.

1 Answer, 1 is accepted

answered on 07 Aug 2017, 10:30 AM

Hi Ján,

The described issue is caused by the fact that the current Grid selection functionality exposes the absolute row index of the selected row only, and it is not directly correlated to the actual data item.

We recently released a serious reimplementation of the selection functionality, and many new features like multiple row selection, programmatic selection, selection via checkbox column, as well as an API for obtaining the currently selected data items, is now available out-of-the-box.

The development build should is now available, and you can get more details about the enhancements, and how to install and use this release in the following GitHub issue:

https://github.com/telerik/kendo-angular/issues/634#issuecomment-318688111

Meanwhile, you can obtain the correct item by processing the data in accordance with the current Grid State (sorting, paging etc. config), for example:

http://plnkr.co/edit/8MGuWuqxBBS7TFrcByv4?p=preview

In scenarios, involving grouped data, the data should be flattened first, as it has different structure, and then the item should be obtained by the respective index, e.g.:

http://plnkr.co/edit/JbYzwB2z9cdcr39gKYPU?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.