How to get the selected element in the Grid component for Kendo UI Angular

Question

Im trying to get the selected element when the user click on any row. For that, I'm using the selectionChange event, but that only returns the index and the selected status of the element. Since I also have the pagination and sorting active, I can't use that index to get the current element, or at least I don't know how to do it.

The data var I use in to feed the grid is this:

this.gridData = process(this.elements, this.state);

Where elements is my original data array and state is the State object with the settings (skip, take, sort).

Any ideas?

Answer 1

So, when you're using the grid with paging, you have to take the GridDataResult element into consideration.

So, if you have your skip set to 10, and you're on page 4, when you click the 1st element in the grid, the event's index is going to be 40. In my code, the way i use this is: My Grid uses a State, which has the properties skip and take. As you move through the pages, skip changes to reflect which elements are shown. So, on page 4, skip will be 40 (if i'm showing 10 results at a time.) So when i want this element's ID, i use:

let fac =  this.gridView.data[value.index - this.state.skip].id;

gridView is my GridDataResult. value is the event i'm passing in, and state is my State. My element has an ID property i need, so that's what i'm targeting.

Hope this helps.

Oh, i should add, the index you receive in the event refers to the GridDataResult not your data source. So, if you have a filter on, the GridDataResult will have fewer entries in it. But, my approach doesn't care about the composition of the GridDataResult.