Essential.js grid state remote serialization.

[Giorgio]

Dear all,

the idea is to support remote serialization of the columns grid setting in essential2.js for ASP .net core.

Which is the best option to do? We have uses enable Persistence but it happens just only when the onload event happens. We want to give to the user,

the ability to save the state throw a remote service.

Best Regards,

Giorgio.

[Hariharan J V]

Hi Giorgio, 

Greetings from the Syncfusion support, 

As your query, we have pass the persist data to server using Ajax POST action from client side. In the below code example, you can define the persist data in server end. Please refer the code example and sample for more information. 

[index.cshtml] 

<button id='change' onclick="handleClick()"> PersistData</button> 

 

    <ejs-grid id="Grid" allowPaging="true" hieght="100%" allowReordering="true" allowFiltering="true" allowGrouping="true" > 

        <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column> 

    .   .   .   .  

        </e-grid-columns> 

    </ejs-grid> 

</div> 

<script type="text/javascript"> 

 

    function handleClick() {         

        var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

        var persistData = gridInst.getPersistData();       

        var ajax = new ej.base.Ajax; 

        ajax.url = "/Home/GetPersistData"; 

        ajax.type = 'POST', 

        ajax.contentType = "application/json; charset=utf-8"; 

        ajax.data = persistData; 

        ajax.send().then(function (args) {             

            var data = new ej.data.DataUtil.parse.parseJson(args); 

            console.log(data); 

        }); 

    } 

</script> 

Screenshot: 

 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/144320/ze/EJ2GridDTVrules-24042019-1084398624.zip 

 

Please get back to us, if you any concern. 

Regards, 

Hariharan 

[Giorgio]

It is fine. Two questions for being more autonomous:

1. is there any api documentation of the grid component (which methods exposes?)

2. How does might work the load part?

[Hariharan J V]

Hi Giorgio,

Thanks for your update.

Query 1:
Please refer the below link for grid api reference.
https://ej2.syncfusion.com/documentation/api/grid/

Query 2:

Please refer the following flow diagram which represents the rendering part of the EJ2 Grid. If this does not meet your requirement, then please provide more details on your requirement. we will provide solution based on the provided details.


Regards,
Hariharan

[Gangabharathy Murugasen]

Sent: Monday, May 13, 2019 7:07 AM
Subject: Re: Syncfusion support community forum 144320, Essential.js grid state remote serialization., has been updated. 

Tenemos solution para Las columnas.. 

[Giorgio]

Ok my concert was about the loading the alreadying stored initialization on the columns size/filters that i have store.

With getPersistData i have all the data that i need. But what about the data that i retrieve from the db and than reiniziatlize the grid?

Should i use mergePersitData or setProperties with those data?

1. We want to give the ability to store to the db, and those is clear.

2. We want also give the abiltiy to fetch from the db, and with that configuration, reconfigure the grid. This is still a bit obscure. 

In WPF with syncfusion is possible thanks

to the grid serialization mechanism. Is is still possibile to load from an external configuration and reconfigure the grid (columns, settings, etc)?

[Hariharan J V]

Hi Giorgio, 

  

As we have validated the provided information and we have achieved your requirements with getPersistData  and setProperties properties in external button actions. Please refer the below code example for more information. 

  

[index.cshtml] 

  

<div> 

    <button id='chan' onclick="setPersistDate()"> PersistData</button> 

    <button id='change' onclick="getPersistData()"> GetPersistData</button> 

  

    <ejs-grid id="Grid" allowPaging="true" hieght="100%" allowReordering="true" allowFiltering="true" allowGrouping="true"> 

  

        <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> 

        <e-grid-columns> 

             .     .     .      . 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

  

  

  

<script type="text/javascript"> 

                      // In this method pass the persist data to server method(PersistData) 

    function setPersistDate() {               

        var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

        var persistData = gridInst.getPersistData();      

        var ajax = new ej.base.Ajax; 

        ajax.url = "/Home/PersistData"; 

        ajax.type = 'POST', 

        ajax.contentType = "application/json; charset=utf-8";        

        ajax.data = persistData;   

        ajax.send(); 

    } 

          // Following method get the persist data from server method(GetPersistData) 

    function getPersistData() { 

        var ajax = new ej.base.Ajax; 

        ajax.url = "/Home/GetPersistData"; 

        ajax.type = 'POST', 

        ajax.contentType = "application/json; charset=utf-8";              

        ajax.send().then(function (args) {            

            var data = new ej.data.DataUtil.parse.parseJson(args); 

            gridInst.setProperties(data[0]); 

            console.log(data); 

        }); 

    }   

</script> 

  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2GridDTVrules-15052019-1420210983.zip 

  

Please get back to us, if you need further assistance. 

  

Regards, 

Hariharan 

[Giorgio]

Dear all,

i wish to thank you for your support. If you desire we are ready to share our dualsearchbox asp.net core view componwnr.

1. The grid is feeded with an odata endpoint

2. The component has code/name and a button that with a modal bootstrap.

Best Regards,

Giorgio.

[Hariharan J V]

Hi Giorgio,

Yes, Please share this, which will more helpful who have similar requirement like this.

Regards,
Hariharan