Telerik Blazor Grid - Set Selected Tickbox state on load.

[Adrian]

I have a Telerik Blazor Grid which has selection tickboxes that allow multiple tickboxes to be selected at any one time.  I can store the selected tickbox state to hold a list of all the selected items.

If I navigate away from the grid say to another page and then return back to the grid I would like to be able to render the grid with the rows that were selected so they are shown as still ticked - is this possible?

Do you have any example code?

Thanks.

---

I have followed the pattern in here: https://github.com/telerik/blazor-ui/blob/master/grid/persist-selection/Pages/Index.razor

I am storing the SelectedItems in the SelectedItemsChanged event handler and storing them on a Cascading value component so they are available across pages.

When returning back to the page that has the grid the SelectedItems are not highlighted.

The grid's SelectedItems property points to the CascadingValue property of selected items.

I can successfully print out the SelectedItems count from the same CascadingValue property above the grid, so there is definitely data there, but the grid doesn't seem to want to show those items as selected.

I have also tried setting the SelectedItems property on SetState but that has same problem.

FYI
The grid uses OnRead where the data is filled into the grid on initialization of the page and when ever paging or filtering, sorting is applied.

---

I have taken the https://github.com/telerik/blazor-ui/blob/master/grid/persist-selection example and updated it to use a CascadingValue parameter to persist the state across pages.  This can be found here in this feature branch: https://github.com/adrianwright109/blazor-ui/tree/feature/persisted-state-not-updated-in-grid

The CascadingValue is working to persist state across pages as can be seen from the animated gif below, as the IDs 1 and 3 are shown under the grid after navigating pages.  What is not working is that those rows in the grid should also be highlighted and ticked as selected.

Animated Gif

---

I think the issue could be that the grid is not seeing the selected items that have been persisted as the same as the ones when returning back to the grid.

The data in the grid is re-populated from the database and the object references don't match. 

If I hard code the data then the persisted selection so correctly when returning back to the grid.  

Is this a bug or do I need to manually override/set Equals on the grid row objects?

If implementing manual overrides to the Equals method is required, examples of how to do this so its compatible with the grid would be appreciated.

---

[Marin Bratanov]

Hi Adrian,

I combined all your posts into a single one so there is a clear flow in the order you found and tried things. With the public forums, you can edit your original post to add/change information to have a coherent description of the problem that won't get scattered if the thread is sorted by date, or upvote on posts change the order.

That said, I would first suggest you look into the Grid State feature to save the current grid settings for your user: https://demos.telerik.com/blazor-ui/grid/persist-state. It already contains the selected items and I think (as you have also found) that the only thing you need to do is to ensure an Equals comparison works for that scenario, see more here: https://docs.telerik.com/blazor-ui/components/grid/selection/overview#selecteditems-equals-comparison.

 

Regards,
Marin Bratanov
Progress Telerik