How to auto refresh a Syncfusion MVC grid periodially

Hi Ling Lin,

Thank you for your interest in Syncfusion products.

To automatically refresh the Grid, perform the followings steps:
1. Download the ASP.NET AJAX 4.0 Client templates from Ajax library and add MicrosoftAjax.js,MicrosoftAjaxTemplates.js files into Scripts/Template folder.
2. Create row template for Grid as like your row definition in your model. For example, please refer the below code snippets.

{{CustomerID}}

{{EmployeeID}}

{{OrderID}}

{{ShipCountry}}

{{ShipCity}}

Here, Rowcells are the column names.

3. Using the Javascript SetInterval function, invoke the custom method(for refreshing the grid) automatically. For example, in the button click event, invoke the custom method through SetInterval function. For example, please refer the below code snippets.

$("#ButtonId").bind('click', function () {
timerID= setInterval(refreshGrid, 2000);
});

4. Get the data using ajax call and pass the records, grid object and template id as argument to updateGridContent method. Refer the below code snippets.


var records = Sys.Serialization.JavaScriptSerializer.deserialize(data);
UpdateGridContent(records, gridobj, "RowTemplate");

5. In this update method template instantiate using instantiateIn() method and new records are updated in the grid content. Please refer the below code snippets.

function UpdateGridContent(records,gridobj, templateID) {
var template = new Sys.UI.Template($get(templateID));
var tbody = $($(gridobj.get_element()).find("table:last")[0]).find("tbody:first")[0];

var records;
$(tbody).html("");// empty the grid content body

//create a new rows and fill the row by records using instantiateIn() method
for (i = 0; i < records.length; i++) {
var tr = document.createElement("TR");
template.instantiateIn(tr, null, records[i]);
$(tbody).append(tr);
}



}
}

Please let us know, if you have any queries.

Regards,
Krishnaraj D

Hi Krishnaraj,

Thanks for responding to my post. I appreciate it. I haven't tried your code yet, it probably works. I used different mechanism, ajax with partial render. It worked. The followings are some general steps to share.

1. Create MVC usercontrol with a syncfusion grid.
2. Use javascript setInverval function to 20000 minis. It invokes the partial render on the usercontrol. It's something like: <% Html.RenderPartial("DetailGridControl", this.ViewData); %>
3. In the controller code, it constructs a list and returns partial view, something like: PartialView("DetailGridControl", retList).

-LL

Hi Ling Lin,


Thanks for the update. Good to hear that you have everything working. However, we would like to point out that in the solution given by us, only the grid contents will be refreshed.

Do not hesitate to update this forum, if you have any queries.


Regards,
Krishnaraj D

Hi Krishnaraj,

I have a query on that. If we use the template than can also integrate the functionality like Grouping,filtering and summarize in the same grid?

Thanks
Alok Shah

Hi Alok,

Thanks for your update.

We suggest you to upgrade to our latest version which supports your requirement of integrating grouping,filtering.. while using template in grid. Please refer the link to download our latest version.

http://www.syncfusion.com/downloads/latest-version

Please let us know your concerns.

Regards,
Sridhar N

Hi Sridhar,

Thanks for the reply.

I already had the latest version of Syncfusion. Can you please provide me sample application or give me some idea for how to implement it?

Hi Alok,

Thanks for your update.

We have prepared the sample for your requirement and the same can be downloaded from the following link:

Sample-1997560157.zip

Also,we would request you to refer to the following online UG link:

http://help.syncfusion.com/ug_92/User%20Interface/ASP.NET%20MVC/Grid/default.htm?turl=Documents%2F52111servermode.htm

Please try this and let us know if you need any further assistance.

Regards,
Eswari.S