Save/retrieve Grid state in database table

[Baba Goud Gadiga]

Hi team,

we have trouble with EnablePersistence attribute of the Grid to save and retrieve the state of the Grid. We would like to save the state in the Database instead, I am not able to find a suitable example or documentation on how to achieve this. I already looked at the below link which unfortunately does not document on how to persist state in a database table.

https://blazor.syncfusion.com/documentation/datagrid/state-management/  

Thanks

Baba

 

[Naveen Palanivel]

Hi Baba Goud Gadiga,

We have analyzed the reported query and we would like to inform we have already discussed this topic in our in the UG documentation. Kindly refer the documentation link shared. 

We have provided support for public methods like GetPersistData() and SetPerisistData(). Using these methods, we can get Grid current persisted state using GetPersistData method and store it in your database. Same way we can set the persist data from database to Grid using SetPersistData method

Refer our UG documentation for your reference :

https://blazor.syncfusion.com/documentation/datagrid/state-management#handling-grid-state-manually

Please get back to us if you have further queries.

Regards,

Naveen Palanivel.

[Baba Goud Gadiga]

Hello Naveen,

Seems saving the state to DB is a overkill feature currently. So we stepped back and would like to go with EnablePersistence attribute of the Grid. The problem with using this attribute is as follows.

Our grid has couple of Columns which are foreign keys. The entity for the grid columns is as follows.

The columns Item_Code, Description and Technician whose values are populated at runtime by using the foreign key relationship between different tables.

Now, we set the property EnablePersistence="false", run the code, grid is displayed  and hit on Edit button to enter the edit mode and the screen looks as below. If you look at the columns Qty which is a numeric edit type and the spin button is set to false and the Technicican Column is a drop down editor. Also, when you select a item from the ItemCode column the Description column values get automatically updated. 

All this works fine until now.

 

Later we changed the EnablePersistence to True and repeated the above steps and you can see that the Columns Technician is no more a Drop down editor and the Qty column is having the spin buttons. And when we change an Item in the ItemCode column the Description column value does not get updated as it used to do . Below is the image of the Grid.

My question is with the columns ItemCode, Description, Technician(these columns are not mapped to database table columns) and Qty( Issue with spin button appearing). Similar issue is happening in our other pages with similar entity structure and Data grid.

I have attached the razor component, code behind file and entity file for your reference.

Attachment: EnablePersistance_Issue_175040_fd7d85fa.zip

[Baba Goud Gadiga]

Hello Naveen,

Adding to the above note, we also found that when the EnablePersistence is set to True, the Autocomplete component does not work. That is it does not show any suggestions when the user starts entering values, while the same columns work when  EnablePersistence is set to False.

We feel there are too many bugs associated with the  EnablePersistence attribute.

Kindly check this at your end.

Thanks

Baba

[Monisha Saravanan]

Hi Baba,

Sorry for the inconvenience caused.

We have analyzed your query and we are able to reproduce the reported query at our end (from version 20.1.0.52). Also we would like to inform that we have fixed the issue on our version (20.1.0.56) version. Please update to our latest Nuget version and check whether the reported issue occurs.

Kindly get back to us if your issue is not resolved or if you have any further queries.

Regards,

Monisha

[Baba Goud Gadiga]

Hello Monisha,

Seems you guys nailed it down. This is working fine with the latest release. We are doing more testing at our end to see if all looks good.

Great job! and appreciate your team for wonderful work.

Thanks

Baba

[Naveen Palanivel]

Hi Baba,

Welcome

We are glad to hear that your query has been resolved. We will wait to hear from you.

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.

[Mahesh Machina]

Hi Naveen,

Please share sample for asp.net core grid

[Santhosh Iruthayaraj]

Hi Mahesh Machina,

As per your request, we have prepared an ASP.NET Core Grid sample that demonstrates saving and restoring manually from the server using the “getPersistData” and “setProperties” methods. Please find the relevant code snippets for your reference:

[Views\Home\Index.cshtml]

 

<script type="text/javascript">

    function store(e) {  

        var grid = document.getElementById("Grid").ej2_instances[0];

        var persistData = JSON.stringify({ persistData: grid.getPersistData() });

        fetch("/Home/StorePersistData", {

            method: "POST",

            headers: {

                "Content-Type": "application/json; charset=utf-8"

            },

            body: persistData

        });

    }

    function restore(e) {

        fetch("/Home/GetPersistData", {

            method: "POST",

            headers: {

                "Content-Type": "application/json; charset=utf-8"

            }

        })

            .then(response => response.json())

            .then(result => {

                var grid = document.getElementById("Grid").ej2_instances[0];

                var state = JSON.parse(result);

                grid.setProperties(state);

            });

    }

</script>

 

[Controllers\HomeController.cs]

 

    [HttpPost]

    public IActionResult StorePersistData([FromBody] PersistDataRequest data)

    {

      if (data != null && !string.IsNullOrEmpty(data.PersistData))

      {

        // Store the persist data

        gridState = data.PersistData;

        return Ok("Data saved successfully.");

      }

      return BadRequest("Invalid data.");

    }

    public IActionResult GetPersistData()

    {

      // Do the retrieve action here

      return Json(gridState ?? string.Empty);

    }

 

Documentation reference: https://ej2.syncfusion.com/javascript/documentation/grid/state-management#restore-to-previous-state

You can find the sample project attached for further reference. Please let us know if you require any additional assistance or clarifications.

Regards,

Santhosh I

Attachment: CoreGridApp_491238bf.zip