how to rebind telerik grid using ajax response and MVC Razor

The Grid has an extensive client side API which you can make use of in your scenario. The event to look out for is OnDataBinding.

Take a look at the following example we have for Grid. http://demos.telerik.com/aspnet-mvc/grid/externalservicetwitter

This is a demo where we connect to Twitter and fetch tweets. But the action of connecting to twitter, searching for tweets, fetching tweets and binding the grid with the results is all done from client side.

The grid is first defined as follows:

<%= Html.Telerik().Grid<TwitterItem>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(o => { }).Title("Author").Width(100);
            columns.Template(o => { }).Title("Avatar").Width(80);
            columns.Bound(o => o.text).Title("Post");
        })
        .ClientEvents(events => events
            .OnDataBinding("onDataBinding")
            .OnRowDataBound("onRowDataBound")
        )
        .Scrollable(scrolling=>scrolling.Height(400))
%>

When user clicks on search button we issue a ajaxrequest on the grid. here is the code snippet:

$('#searchButton').click(function(e) {
     e.preventDefault();
     $('#Grid').data('tGrid').ajaxRequest();
});

This causes the OnDataBinding to fire. Here is the code snippet for ondatabinding method:

function onDataBinding(e) {
    var grid = $(this).data('tGrid');

    $('.t-status .t-icon', grid.element).addClass('t-loading');
    // call the twitter search api
    $.ajax({
        url: 'http://search.twitter.com/search.json',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'jsonp',
        error: function(xhr, status) {
            alert(status);
        },
        data: {
            q: $('#searchText').val()
        },
        success: function(result) {
            grid.dataBind(result.results);
            $('.t-status .t-icon', grid.element).removeClass('t-loading');
        }
    });
}

As you can see we issue a ajax request to twitter and when the data comes back, we just call dataBind method on the grid.

Hope i was able to answer your question.

Lohith (Tech Evangelist, Telerik India)