Hi,
In my scenario, my component can receive a refresh instruction from Signal R hub. My blazor component contains a SfGrid component, and I want refresh this grid but keep the user's selection (grid with pagination, check box selection with persistence). After using the Grid.Refresh() method, the selection is lost. I can select rows again in the current page if I had stored the selected rows information. But I can not select rows in others pages and therefore restore the user's full selection.
How can I do that ?
Thank you and happy new year 2023 !
Greetings from Syncfusion support.
Query: “But I can not select rows in others pages and therefore restore the user's full selection”
We understand your requirement and it will not be possible for us to select the records which are not present on the current page. This is the behavior of the Grid.
As there is no support for maintaining the selection in the Grid using persistence, we can achieve your requirement manually at the sample level using the public methods of the grid and some calculations to maintain the selection which you have achieved on your own. Using the following way we can select the records which are not present on the current page. But the only possible way is that records will be selected only when navigating to that particular page.
For example, if the stored primary-key
value is located on the fourth page. upon rendering. The grid will be the first page and the record on the fourth page will not be selected. Upon navigating to the fourth page, the particular record will be selected based on the stored primary key value.
So we recommend storing the primary key values of the selected records obtained using the GetSelectedRecordsAsync method of the Grid in local storage using the BrowserStorage concept and the unique ID of the Grid. This can be done using the Created, DataBound event of the Grid.
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage @inject ProtectedLocalStorage BrowserStorage @using Syncfusion.Blazor.Grids
<SfGrid ID="FirstGrid" @ref="GridInstance" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> <GridSelectionSettings PersistSelection="true" Type="SelectionType.Multiple"></GridSelectionSettings> <GridEvents Created="Created" Destroyed="Destroyed" DataBound="DataBound" TValue="Order"></GridEvents> <GridColumns> <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn> <GridColumn Field=@nameof(Order.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> </GridColumns> </SfGrid>
@code { SfGrid<Order> GridInstance{ get; set; } public List<Order> Orders { get; set; } public List<int?> StorageSelected { get; set; } = new List<int?>(); public List<int?> Selected { get; set; } = new List<int?>(); public async Task Destroyed() { var val = await GridInstance.GetSelectedRecordsAsync(); await BrowserStorage.DeleteAsync(GridInstance.ID + "_selected"); await BrowserStorage.SetAsync(GridInstance.ID + "_selected", val.Select(x=>x.OrderID)); }
public async Task DataBound() { var currentView = await GridInstance.GetCurrentViewRecordsAsync(); var remove = new List<int?>(); foreach (var val in Selected) { if (currentView.Select(x => x.OrderID).Contains(val)) { remove.Add(val); var index = await GridInstance.GetRowIndexByPrimaryKeyAsync(val); await GridInstance.SelectRowAsync(index); } } foreach(var v in remove) { Selected.Remove(v); } } public async Task Created() { var result = await BrowserStorage.GetAsync<List<int?>>(GridInstance.ID + "_selected"); if (result.Success) { StorageSelected = result.Value; Selected = StorageSelected; } } |
We have provided a sample code example to guide you in implementing the solution. Please ensure to have a unique ID for the Grid component and unique values in the grid data for the primary key column.
Let us know if you have any further queries.
Regards,
Vignesh Natarajan
Perfect ! Thank you
Hi Frederic,
Welcome. Kindly get back to us if you have further queries. As always we will be happy to help you.
For info, if anyone is looking for an equivalent solution:
I use the RowSelected and RowDeselected events to manage my own list of selected records.
When refreshing the data, I recreated a new list of selected records from the recovered data and the old list (to be sure to have the right references on the right objects). And, finally, I'm using the DataBound event to visually select items based on the displayed page.
In this scenario I don't use SfGrid.SelectedRecords at all anymore but only my own list of selected records.
Hi Frederic,
Thanks for the additional information.