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