Question

How can I reload/refresh a telerik data grid after data update? Is there an inbuilt telerik function which I can call in ajax success? If not, how best to refresh/reload a telerik grid?

jquery:

$("#SaveHours").click(function (e) {

    e.preventDefault();
    var link = '/Project/SaveHours';

    $.ajax({
        type: 'POST',
        url: link,
        data: { hours: $("#HoursWorked").val(),
            descType: $("#Description").val(),
            wrkType: $("#WorkType").val()
        },
        dataType: 'json',
        success: function (result) {
            alert(result.message);
        },
        error: function (result) {
            alert("Failed");
        }
    });

The Grid is located in a partial view, Here is how I return the Partial:

 <%  Html.RenderAction("Hours"); %>

Here is my Controller Action:

[GridAction]
public ActionResult Hours()
{
    ViewData.Model = db.vwHours;
    return View();
}

Any help is appreciated

Answer 1

You can use telerik grid rebind method

$.ajax({
        type: 'POST',
        url: link,
        data: { hours: $("#HoursWorked").val(),
            descType: $("#Description").val(),
            wrkType: $("#WorkType").val()
        },
        dataType: 'json',
        success: function (result) {
            //rebind here
            var grid =  $("#MyGrid").data("tGrid");
            grid.dataBind(result.data)
        },
        error: function (result) {
            alert("Failed");
        }
    });