Save Blazor EjsGrid state (column visibility, filtering, sorting, ordering, grouping) in database

[Bishan Moteria]

Hello,

Is there a way to save EjsGrid state to database? We'd like to store user applied filters, column visibility, sorting, ordering, grouping into the database.

I was aware of an option EnablePersistence but it would be great if there were GridEvent(s) (example AfterGridFiltered or BeforeGridFiltered) that allows end user to capture grid settings and potentially saved in database/browser storage. Also an ability to load saved grid settings when grid is being initialized.

Thank you,

Bishan M.

[Vignesh Natarajan]

Hi Bishan,  

Greetings from Syncfusion support.  

Query: “it would be great if there were GridEvent(s) (example AfterGridFiltered or BeforeGridFiltered) that allows end user to capture grid settings and potentially saved in database/browser storage” 

We suggest you to achieve your requirement using OnActionComplete event of EjsGrid. OnActionComplete event will be triggered when an certain actions (filtering, grouping, searching etc) gets completed. In the event arguments you can get the certain details like grouped column,  filter values etc. Using this event you can save the grid state into your database.  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactioncomplete  

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin – triggers when an action is initialized 

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan. 

[Bishan Moteria]

Hi Vignesh,

Thank you for your response.

These events are much helpful but with it only provides one last filter user applied. Ideally we would like to get all table filters, columns visibility, sorting, orderings, and all groupings when executing OnActionComplete or OnActionBegin rather than just last one.

Regards,

Bishan M.

[Vignesh Natarajan]

Hi Bishan,  

Thanks for the update.  

Query: “Ideally we would like to get all table filters, columns visibility, sorting, orderings, and all groupings when executing OnActionComplete or OnActionBegin rather than just last one” 

Kindly refer the below API to get the FilterSettings, GroupSettings, SortSettings and GetColumns() respectively. Using these API’s you can get the corresponding values. Refer the below code example.  

@using Syncfusion.EJ2.Blazor.Grids 

 

<EjsGrid @ref="DefaultGrid" AllowGrouping="true" AllowSorting="true" AllowFiltering="true" DataSource="@Orders" AllowPaging="true"> 

    <GridEvents OnActionComplete="OnComplete" TValue="Order"></GridEvents> 

. . . . . . . . . .. . . . .  

</EjsGrid> 

 

@code{ 

    EjsGrid<Order> DefaultGrid { get; set; } 

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

    public async Task OnComplete(ActionEventArgs<Order> Args) 

    { 

        var FilterApplied = DefaultGrid.FilterSettings.Columns; // to get filtered column details 

        var GroupingApplied = DefaultGrid.GroupSettings.Columns; // to get grouped column details 

        var SortingApplied = DefaultGrid.SortSettings.Columns; // to get sorted column details 

        var Columns = await DefaultGrid.GetColumns(); // to get columsn details like visibility and other properties 

    } 

Refer our API documentation for your reference 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#properties  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumns_System_Nullable_System_Boolean__  

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan. 

[Bishan Moteria]

Hi Vignesh,

This was very helpful as we can now extract filters, groups, sorting from the grid object and save it somewhere else.

Thank you for detailed solution.

Bishan M.

[Vignesh Natarajan]

Hi Bishan,  

Thanks for the update.  

We are happy to hear that you are able to achieve your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Heidar Holmberg Jonsson]

Hello,

thank you for the the info on how to get the currently applied filters, sorting and grouping, but how would I use this to reapply the filters, sorting and grouping? So far I've only been able to add a filter to one column at a time with the FilterByColumn method on the grid ref object, can I apply a set of filters programatically?

[Vignesh Natarajan]

Hi Heidar,  

 

Greetings from Syncfusion support.  

 

Query: “but how would I use this to reapply the filters, sorting and grouping?” 

 

We suggest you to achieve your requirement using SortColumn() and GroupColumn() method of EjsGrid. Refer the below code example.  

 

<EjsButton OnClick="Ch">Filtering</EjsButton> 

<EjsButton OnClick="Group">Grouping</EjsButton> 

<EjsButton OnClick="Sort">Sorting</EjsButton> 

  

  

<EjsGrid @ref="Grid" DataSource="@Orders" Query="@Qry" AllowFiltering="true" AllowGrouping="true" AllowSorting="true" AllowPaging="true"> 

. … . . . . . . . 

</EjsGrid> 

  

@code{ 

EjsGrid<Order> Grid { get; set; }

    . . . . . .. . . .  

    public async void Sort() 

    { 

        await Grid.SortColumn("OrderID", SortDirection.Descending); 

    } 

    public async void Group() 

    { 

        await Grid.GroupColumn("CustomerID"); 

  

    } 

    . .. . .. .. .  

} 

 

 

Refer the API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumn_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__  

 

Query: “So far I've only been able to add a filter to one column at a time with the FilterByColumn method on the grid ref object, can I apply a set of filters programatically?” 

 

Yes. We can achieve your requirement by using Query property of EjsGrid. We need to generate a WhereFilter and assign that filter query to the Where function of the Grid's Query property. Refer the below code example.  

 

<EjsButton OnClick="Filter">Filtering</EjsButton><EjsButton OnClick="Group">Grouping</EjsButton><EjsButton OnClick="Sort">Sorting</EjsButton>  <EjsGrid @ref="Grid" DataSource="@Orders" Query="@Qry" AllowFiltering="true" AllowGrouping="true" AllowSorting="true" AllowPaging="true">. .. . . . . .. . </EjsGrid> @code{    public Query Qry { get; set; }    EjsGrid<Order> Grid { get; set; }    public List<Order> Orders { get; set; }    public void Filter()    {        var pre = new WhereFilter();        var predicate = new List<WhereFilter>();        predicate.Add(new WhereFilter() { Condition = "or", Field = "CustomerID", value = "ALFKI", Operator = "equal" });        predicate.Add(new WhereFilter() { Condition = "or", Field = "Freight", value = 50, Operator = "lessthanorequal" });//combine both the predicates using AND operator        pre = WhereFilter.And(predicate);//assign it to Grid Query.        Qry = new Query().Where(pre);    }. . . . . .. . . . .}

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/150340/ze/BlazorApp1-1593004732  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan. 

[Heidar Holmberg Jonsson]

Thank you very much! :D

[Vignesh Natarajan]

Hi Heidar,  

Thanks for the update. 

We are glad to hear that you are able to achieve your requirement using our solution. 

Kindly get back to us if you have further queries.   

Regards, 

Vignesh Natarajan.