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
  1. Home
  2. Forum
  3. Blazor
  4. Save Blazor EjsGrid state (column visibility, filtering, sorting, ordering, grouping) in database

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

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.

9 Replies
VN Vignesh Natarajan Syncfusion Team January 3, 2020 01:33 PM UTC

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 



Please get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 



BM Bishan Moteria January 3, 2020 03:10 PM UTC

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.

VN Vignesh Natarajan Syncfusion Team January 6, 2020 09:17 AM UTC

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 





Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan. 


BM Bishan Moteria January 7, 2020 06:23 PM UTC

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.

VN Vignesh Natarajan Syncfusion Team January 8, 2020 04:02 AM UTC

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. 


HH Heidar Holmberg Jonsson March 10, 2020 02:51 PM UTC

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?

VN Vignesh Natarajan Syncfusion Team March 11, 2020 10:21 AM UTC

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 
 
 
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  
 
 
Kindly get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan. 


HH Heidar Holmberg Jonsson March 11, 2020 10:52 AM UTC

Thank you very much! :D

VN Vignesh Natarajan Syncfusion Team March 12, 2020 03:34 AM UTC

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. 


Loader.
Up arrow icon