How to refresh the ej-grid datasource

[dsapo]

Hi Support:

We need to know how to refresh the ej-grid inside a view without refreshing the whole page view.  Is there is a event that we can call from the javascript client side to do that.

I noticed that in the Schedule component, when I add/modify an appointment, only the calendar gets refreshed.

Thanks in advanced

David

[Jayaprakash Kamaraj]

 

Hi David, 

 

Thank you for contacting Syncfusion support. 

 

In Grid, we can refresh the grid with new dataSource using dataSource method of ejGrid. Please refer to the below help document and code example. 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource 

    <script> 

    // Create grid object. 

    var gridObj = $("#Grid").data("ejGrid"); 

    // Refreshes the grid data source 

    gridObj.dataSource(data); 

    </script> 

We can refresh the Grid content itself without loading the page using refreshContent method of ejGrid. Please refer to the below help document and code example. 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

    <script> 

    // Create grid object. 

    var gridObj = $("#Grid").data("ejGrid"); 

    gridObj.refreshContent(); // Refreshes the grid contents only 

    gridObj.refreshContent(true); // Refreshes the template and grid contents 

    </script> 

Regards, 

 

Jayaprakash K. 

[dsapo]

Hi Jayaprakash:

Thanks for the info.  The only thing that I would like to be clear is that my ej-grid is binded to a viewmodel like this:

<ej-grid id="grid" datasource="Model.Requests" allow-selection="false" allow-paging="true"

         databound="databound" template-refresh="refreshTemplate">

<e-columns>

        <e-column field="RequestDate" header-text="Requested Date" format="{0:MM/dd/yyyy h:mm tt}"></e-column>

     </e-columns>

</ej-grid>

Then my javascript is:

var gridObj = $("#Grid").data("ejGrid"); 

The problem is that when the grid is refreshed with the latest data, the format of the RequestDate column is lost.

How can I maintain the formatting.

Thanks again.

David

 

[Jayaprakash Kamaraj]

Hi David, 

We can change the unformatted JSON date value by ej.parseJSON function. So, we suggest you to pass the new data to ej.parseJSON function before assigned it to the dataSource method of grid. Please refer to the below code example 

 

    <script>  

    // Create grid object.  

    var gridObj = $("#Grid").data("ejGrid");  

    // Refreshes the grid data source  

    gridObj.dataSource(ej.parseJSON(data)); 

    </script>  

 

We have already discussed the same in following knowledge base document. 

https://www.syncfusion.com/kb/3017/date-fields-in-json-data-are-not-formatted-properly-in-ajax-post 

Regards, 

 

Jayaprakash K. 

[dsapo]

Excellent answer as always.

Thank you very much

David

[Jayaprakash Kamaraj]

Hi David,  

 

We are happy that the provided suggestion helped you.  

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

 

Regards,  

 

Jayaprakash K.