1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Store currently selected filtering options

Store currently selected filtering options

Hi,


I have a simple grid and I would like to be able to store sorting, searching and filtering routines so a user clicks a button and it filters by Type, status and then orders by date created descending. The ideal goal is that the users can define and store their own and name it and then recall it by clicking a button at any time Is there a way to do that?


Cheers RJ


13 Replies
SK Sujith Kumar Rajkumar Syncfusion Team February 21, 2022 11:22 AM UTC

Hi RJ, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement of persisting a Grid state and then restoring it dynamically on button click by manually storing and restoring the Grid state. This can be achieved by following the below steps, 
 
Using the Grid’s getPersistData method you can get the current grid settings which will be returned as displayed in the below image, 
 
 
 
You can then store these settings in window local storage or in your service and on load, you can fetch the stored data and restore either the entire saved settings or the required settings alone using Grid’s setProperties method. This is demonstrated in the below code snippet for your reference, 
 
var persistData; 
 
function onStore() { 
   var gridObj = document.getElementById('grid').ej2_instances[0]; 
   persistData = JSON.parse(gridObj.getPersistData()); 
} 
 
function onRestore() { 
    // Restores the entire stored settings to the Grid 
    gridObj.setProperties(persistData); 
 
    // Restores the stored filter properties to the Grid 
    gridObj.setProperties({ filterSettings: persistData.filterSettings }); 
} 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


RJ RJ February 21, 2022 07:29 PM UTC

Hi,


Thanks for your response, I have tried this solution but when I debug the line persistData = JSON.parse... is always null! I am then trying to pass this grid data using an ajax call to my controller to save the data in my database... Have you any ideas? When I debug that line is always null and the ajax runs...


cheers,

RJ


Attachment: grid_(2)_b856e1fd.zip


SK Sujith Kumar Rajkumar Syncfusion Team February 22, 2022 11:25 AM UTC

Hi Rj, 
 
We checked this case from our end by creating similar sample to send persist data to server side but could not reproduce the problem as the data was properly retrieved and sent from the Grid to the controller action method. Please check the below sample for reference, 
 
 
So please share us the following information to validate further on this, 
 
  • Are any console thrown? If so please share it.
  • Let us know if the Grid instance is available in the gridObj variable on debugging.
  • Let us know how you have referenced the script file for the EJ2 Grid control.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.
 
Regards, 
Sujith R 


RJ RJ February 23, 2022 01:38 AM UTC

Thanks for your reply,


I have managed to get this to work.

The only thing I cant get working is I need to pass an extra string to the controller. This is a string where the name the user wants to call this grid current state. Can you help with how I could do this?

Also I will want to store this state in an SQL table as I will recall this from the database and then send it back to the grid. I was going to serialize the Object then deserialize it to pass it back to the grid.


Cheers,

RJ


SK Sujith Kumar Rajkumar Syncfusion Team February 23, 2022 10:20 AM UTC

Hi RJ, 
 
You can pass the extra string value along with the persist data by adding it to the persist data object as demonstrated in the below code snippet, 
 
document.getElementById('select').addEventListener('click', function (args) { 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    persistData = JSON.parse(gridObj.getPersistData()); 
    persistData.stateName = 'NewStateName'; 
    // Ajax post is sent with Grid’s selected records 
    var ajax = new ej.base.Ajax({ 
        url: '/Home/GetPersistData', 
        type: 'POST', 
        contentType: 'application/json; charset=utf-8', 
        data: JSON.stringify(persistData), 
        successHandler: function (data) { 
        } 
    }); 
    ajax.send(); 
}) 
 
Then this property name needs to be defined in the controller class used for accessing this data as arguments, 
 
public IActionResult GetPersistData([FromBody]PersistType data) { 
    return Json(new { result = data }); 
} 
 
public class PersistType { 
                ... 
    public string stateName { get; set; } 
} 
 
Finally you will be able to access this data in the controller action method as shown in the below image, 
 
 
 
You can then store this data in your SQL data base or global property and access it when required. 
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


SK Sujith Kumar Rajkumar Syncfusion Team February 24, 2022 11:22 AM UTC

Hi RJ, 
 
We are glad to hear that your previous query has been resolved. 
 
And as for this – “I have tried today on how to store this object PersistType in your sample using entity framework and an sql database.”, it is a general query not related to the Grid control. So we suggest you to refer the below common links where this case is discussed for more details, 
 
 
Regards, 
Sujith R 


RJ RJ February 24, 2022 03:16 PM UTC

Hi Thank you for your reply.

This has worked well for me!

I have tried today on how to store this object PersistType in your sample using entity framework and an sql database. I have tired serializing the object and trying to store each component of the object as a string but it doesn't work as a number of the attributes are the generic 'object' type which I had never used before. Can you offer any help? The model/table in the database doesn't matter as it is only for storing these saved table settings for recall to the front end. There will be 5 or so preset options to filter by type that users can recall plus then user defined filtering options


Any help appreciated


Cheers RJ


RJ RJ replied to Sujith Kumar Rajkumar March 8, 2022 08:27 PM UTC

Hi

so I have continued to look into making this work and I can't make it word when I try to serialize the JSON object that had been suggested to pass to my controller a lot of the data is lost?

Do you have any other suggestions on what to do or a different type of object to receive in the controller?


Cheers,


RJ


Attachment: serialized_3b6db565.zip

SK Sujith Kumar Rajkumar Syncfusion Team March 9, 2022 01:21 PM UTC

Hi RJ, 
 
From the query we could understand that you are facing problems on trying to deserialize the Grid persisted data in the server side controller action method. The EJ2 Grid properties can be accessed in the server side by installing the Syncfusion NuGet packages(can be checked in this link). Once installed you can use the Grid property classes to access the persisted properties as demonstrated in the below code snippet, 
 
using System; 
using Syncfusion.EJ2.Grids; 
 
namespace EJ2Grid.Controllers 
{ 
    public class HomeController : Controller 
    { 
        public IActionResult GetPersistData([FromBody]PersistType data) 
        { 
            return Json(new { result = data }); 
        } 
 
        public class PersistType 
        { 
            public int selectedRowIndex { get; set; } 
            public GridFilterSettings filterSettings { get; set; } 
            public GridGroupSettings groupSettings { get; set; } 
            public GridPageSettings pageSettings { get; set; } 
            public GridSearchSettings searchSettings { get; set; } 
            public GridSortSettings sortSettings { get; set; } 
            public List<GridColumn> columns { get; set; } 
            public string stateName { get; set; } 
        } 
    } 
} 
 
More details on the Grid property classes can be checked in the below API documentation link, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


RJ RJ March 10, 2022 12:44 AM UTC

Hi,

Thanks for your prompt reply!

I tried this again this afternoon and it didn't work for me. The data parameter as shown in the capture is null, even though when I debug the ajax or just the previous suggestion of using object typed attributes it did work... I have installed all the nugets as described, As I only want to store and retrieve these settings, and get the name supplied by the user, is it possible to maybe store the settings as a some other format in SQL rather than breaking the settings down into many parts?


Kind regards,

RJ


SK Sujith Kumar Rajkumar Syncfusion Team March 10, 2022 12:33 PM UTC

Hi RJ, 
 
We modified the previously shared sample based on our last provided suggestion and could not replicate the problem as the data was properly received. Please check the below modified sample and screenshot for reference, 
 
 
 
 
So can you please confirm us the following details to validate further, 
 
  • Let us know if you are able to replicate the problem case in the above shared sample.
  • Share us the ajax related code snippet from where the data is sent to your controller action method.
  • Share us the network tab request details when this action is performed.
 
Regards, 
Sujith R 


RJ RJ March 11, 2022 03:52 PM UTC

Hi So I tried again and this didnt work for me!

I have attached the snippets of code requested and it shows that the grid object is being parsed but doesnt get passed to the controller for some reason!


Cheers,

RJ


Attachment: network_2fe6c148.zip

SK Sujith Kumar Rajkumar Syncfusion Team March 14, 2022 11:42 AM UTC

Hi RJ, 
 
Thanks for sharing the details. 
 
We have created a new ticket under your account for the reported query. We suggest you follow up with that ticket for further updates. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon