Preserve Telerik MVC Grid Checkboxes When Paging

This article explains how to preserve the state of input checkboxes in a Telerik ASP.NET MVC Grid control when paging, sorting, and filtering. This solution only works for client side Data Binding. If you're using Server Side Data Binding you'll need to come up with a different solution.

I'm a big fan of the Grid control. It's a real time saver and fills in a big gap that ASP.NET MVC is missing over WebForms!

The first step is to maintain a list of checkbox states. Below is the client side javascript you'll need to add to the page that has your MVC Grid. Note, jQuery is required for this to work.

var selectedIds = [];

$(document).ready(function () {
    //wire up checkboxes.
    $('#YOUR_GRID_ID').on('change', ':checkbox', function (e) {

        var $check = $(this);
        //console.log($check);
        if ($check.is(':checked')) {
            //add id to selectedIds.
            selectedIds.push($check.val());
        }
        else {
            //remove id from selectedIds.
            selectedIds = $.grep(selectedIds, function (item, index) {
                return item != $check.val();
            });
        }
    });
});

NOTE: You'll want to change YOUR_GRID_ID to match what you set your Grid's Name to.

The code above uses the global variable selectedIds to store the values of each selected checkbox in the grid. I use the jQuery live method to attach the change event to every checkbox in the grid. The nice thing about live is that it will catch new checkboxes that are loaded when paging, filtering, or sorting.

The next step is to restore the checkbox states after each ajax request that changes the grid.

function onDataBound(e) {
    //restore selected checkboxes.
    $('#YOUR_GRID_ID :checkbox').each(function () {
        //set checked based on if current checkbox's value is in selectedIds.
        $(this).attr('checked', jQuery.inArray($(this).val(), selectedIds) > -1);
    });
}

NOTE: You'll want to change YOUR_GRID_ID to match what you set your Grid's Name to.

I use the Grid's OnDataBound client side event, which fires after the Grid is finished loading new data, to parse threw all the new checkboxes and set their checked state based on if their value is in our selectedIds global variable.

Add the .ClientEvents line below to wire up the onDataBound event:

@(Html.Telerik().Grid<Web.Models.YOURMODEL>()
    .Name("VideosGrid")
    .ClientEvents(events => events.OnDataBound("onDataBound"))
)

If this helped you or you have a suggestion to improve it, let me know via the comments!