[Solved] Loading Telerik Grid from an AJAX response

[Aled]

Hi,

I'm changing the grids in an ASP.NET MVC application from WebGrid to Telerik's MVC Grid.

My grids reside in partial views that receive an IEnumerable<> with the data to display. Those partial views are rendered by many other views. Their respective action methods fetch the actual data for the partial view.

I want sorting, filtering and grouping via AJAX. But because I can't know in my partial view where the data is coming from, I can't use the grid's AJAX binding.

For Web grid I used jQuery's .live() and .load() to insert the sorted grid in place of the older one. But when I do the same with Telerk's grid the filter button no longer works (it isn't clickable). I'm assuming the filter button loses its events, but how do I set them?
 

$(document).ready(function () {
    $('.content table thead tr a').live('click', updateGrid);
}

function updateGrid(e) { // http://msdn.microsoft.com/en-us/magazine/hh288075.aspx
       e.preventDefault();
        var url = $(this).attr('href');
        var grid = $(this).parents('.ajaxGrid');
        if (grid.size() > 0) { // It's a WebGrid, works great
            var gridId = grid.attr('id');
            grid.load(url + ' #' + gridId);
        }
        else { // It's Telerik's Grid. Sorting works but the filter button doesn't.
            var grid = $(this).parents('.t-grid');
            var gridId = grid.attr('id');
            grid.parent().load(url + ' #' + gridId);
            /* WHAT DO I DO HERE? */
        }
};