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

1
votes

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?

1
angularkendo-ui-angular2
Maybe the only way is to calculate which elements are currently visible from the state of your object: page * items_per_page + index is your real index in sorted items... - Seididieci
Yeah I was currently trying that approach, but it seems quite complicated to have to "manually" calculate it, I expected to be able to get that element directly from somewhere... - Dunos
I played a bit with plunker, the Index value is the real index of the original list if you let Kendo Grid handle paging etc... see link - Seididieci
Got something similar myself, but a bit different since I'm using the sorting capabilities too, so in my code I have to use the processed data. Thanks anyway @Brumiano - Dunos
You're welcome! - Seididieci

1 Answers

2
votes

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.