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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150340 Jan 2,2020 07:15 PM UTC Mar 12,2020 03:34 AM UTC Blazor 9
loading
Tags: Grid
Bishan Moteria
Asked On January 2, 2020 07:15 PM UTC

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 [Syncfusion]
Replied On 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. 



Bishan Moteria
Replied On 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.

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Bishan Moteria
Replied On 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.

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Heidar Holmberg Jonsson
Replied On 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?

Vignesh Natarajan [Syncfusion]
Replied On 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. 


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

Thank you very much! :D

Vignesh Natarajan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon