Reset/Ignore Persistence for SearchSettings

[Tammy]

I have an application that uses an SfGrid to show information queried from our server using a CustomAdaptor. EnablePersistence is set to true and I would like to keep this for almost all settings, but I have a (simple, custom) search bar I would like to clear upon entering the page.

I've attempted to modify the persistence settings in local storage during the OnAfterRenderAsync or OnInitializedAsync methods, however changing these values seems to be overwritten when the page fully loads. However, when my initial query runs, the DataAdaptor is still being sent the old search term. 

Is there a proper way for me to clear persistence values for just SearchSettings?

[Naveen Palanivel]

Hi Tammy,

From your query we suspect that you need to persist only certain operations in grid. We would like to inform by using EnablePersistence it will persist all the possible state of DataGrid. It is the default behavior. So we suggest you to handle Grid state manually. Here we have cleared the search value before saving the grid state on Save method. Kindly refer the attached code snippet and sample for your reference.

 

 

<SfButton @onclick="Save">save</SfButton>

<SfButton @onclick="Load">Load</SfButton>

<SfButton @onclick="Reset">Reset</SfButton>

 

<SfGrid TValue="Order" ID="Grid1" @ref="Grid" DataSource="Orders" AllowSorting="true" AllowFiltering="true" ShowColumnChooser="true" AllowPaging="true" Toolbar="@(new List<string>() { "Search"})">

</SfGrid>

 

@code {

    public static List<Order> Orders { get; set; }

    SfGrid<Order> Grid;

    public string _state;

 

   

 

    public class Order

    {

        public int OrderID { get; set; }

        public string CustomerID { get; set; }

        public double Freight { get; set; }

    }

    public async void Save()

    {

        _state = await Grid.GetPersistDataAsync();

        dynamic PersistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(_state.ToString());   // we can remove/save only the required settings.

        dynamic _statek = JsonSerializer.Deserialize<GridSearchSettings>(PersistProp["searchSettings"].ToString());

        _statek.Key = "";

        PersistProp["searchSettings"] = JsonSerializer.Serialize(_statek).ToString();

        _state = JsonSerializer.Serialize(PersistProp);

 

        Service.setGridState(_state);

    }

    public void Load()

    {

        string Griddata = Service.GetGridState();

        Grid.SetPersistDataAsync(Griddata);

    }

    public void Reset()

    {

        Grid.ResetPersistDataAsync();

    }

Reference: https://blazor.syncfusion.com/documentation/datagrid/state-management#restore-to-previous-state

Forum public link : https://www.syncfusion.com/forums/172940/datagrid-toolbar-items-icon?reply=S2k2R3

Kindly get back to us if you have further queries.

Regards,

Naveen

Attachment: BlazorApp1_6be81444.zip

[Tammy]

Is it possible to implement this automatically upon page load/close? We don't want the users to have to manually refresh the search box in order to get accurate results when they open the page.

[Guhanathan Ramanathan]

Hi Tammy,

 

Based on your query, we've enhanced the Syncfusion Grid persistence mechanism so users no longer need to manually click "Save" or "Load" buttons—now the grid state (like filters, search, paging) is automatically loaded using Blazor’s OnAfterRenderAsync lifecycle method when the page renders, and can optionally be saved on user interactions like sorting or filtering by hooking into grid events; this ensures a seamless experience where user preferences are retained across sessions.

 

<SfGrid TValue="Order" ID="Grid1" @ref="Grid" DataSource="Orders" AllowSorting="true" AllowFiltering="true" ShowColumnChooser="true" AllowPaging="true" Toolbar="@(new List<string>() { "Search"})">

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <GridPageSettings PageSize="8"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

@code {

    public static List<Order> Orders { get; set; }

    SfGrid<Order> Grid;

    public string _state;

    private bool _hasLoaded = false;

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

        }).ToList();

    }

 

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender && !_hasLoaded)

        {

            _hasLoaded = true;

            await LoadAsync();

        }

    }

 

    public class Order

    {

        public int OrderID { get; set; }

        public string CustomerID { get; set; }

        public double Freight { get; set; }

    }

 

    public async Task SaveAsync()

    {

        _state = await Grid.GetPersistDataAsync();

        var persistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(_state);

        var searchSettings = JsonSerializer.Deserialize<GridSearchSettings>(persistProp["searchSettings"].ToString());

        searchSettings.Key = "";

        persistProp["searchSettings"] = JsonSerializer.Serialize(searchSettings);

        _state = JsonSerializer.Serialize(persistProp);

 

        Service.setGridState(_state);

    }

 

    public async Task LoadAsync()

    {

        string gridData = Service.GetGridState();

        if (!string.IsNullOrEmpty(gridData))

        {

            await Grid.SetPersistDataAsync(gridData);

        }

    }

 

    public async Task ResetAsync()

    {

        await Grid.ResetPersistDataAsync();

    }

}

 

 

Regards,
Guhanathan R

Attachment: BlazorApp1_6be81444_(2)_8bfebcd1.zip