We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Selection persistence after GRID Refresh

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 !


5 Replies 1 reply marked as answer

VN Vignesh Natarajan Syncfusion Team January 11, 2023 04:33 AM UTC

Hi Frederic,


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


Attachment: BlazorApp1_1d54eb92.zip

Marked as answer

FF Frederic FOURGEOT January 11, 2023 05:00 PM UTC

Perfect ! Thank you



MS Monisha Saravanan Syncfusion Team January 12, 2023 04:14 AM UTC

Hi Frederic,


Welcome. Kindly get back to us if you have further queries. As always we will be happy to help you.




FF Frederic FOURGEOT January 12, 2023 08:51 AM UTC

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.



MS Monisha Saravanan Syncfusion Team January 13, 2023 02:39 PM UTC

Hi Frederic,


Thanks for the additional information.


Loader.
Up arrow icon