Toffer and the Multi-Select CheckBoxes

So I was whipping up a MVC view the other day that allowed a user to update the status of a given database object.  The who and what isn’t important for the point of the post.  As I was testing the functionality out it hit me that it was a total pain in the butt to use if you needed to set the same status to several rows…and it would sure be handy if there was some way to multi select rows to update.  So I turned on the .Batch(true) in the .Ajax property of the Kendo Grid.  This allowed me to set rows, then click the “Save” button to submit the results.  Functional but it still felt unnatural to do.  What I really wanted was to add a CheckBox column to the Grid and then some method to do the bulk updating of all the selected rows.  So off I went in search of a snippit of code to show me how it’s done…and I was very successful.  Not only did I figure out how to add a CheckBox column…but I also figured out how to add one to the header row so that it would check all rows.  Here’s the relevant code I used to do it.

The important part to look at in the Kendo Grid code below is the column that starts with “c.Template(@<text></text>)”.  The ClientTemplate and Header template is where the CheckBoxes are being added in and the JavaScript function sets a “Selected” property that MUST already be in the object model being used in the Grid.  That was the part I kept having difficulty with is that I was looking for a way in that I didn’t have to add some special property to the object model…but I couldn’t figure it out so I took the easy way by customizing the model object bound to the grid.

Javascript Functions:
$(function ()
{
    $('#YourKendoGridName').on('click', '.chkbx', function ()
    {
        var checked = $(this).is(':checked');
        var grid = $('#YourKendoGridName').data().kendoGrid;
        var dataItem = grid.dataItem($(this).closest('tr'));
        dataItem.set('Selected', checked);
    })
})

function checkAll(e)
{
    var state = $(e).is(':checked');
    var grid = $('#YourKendoGridName').data().kendoGrid;

    $.each(grid.dataSource.view(), function ()
    {
        if (this['Selected'] != state)
            this.dirty = true;

        this['Selected'] = state;
    });

    grid.refresh();
}

Kendo Grid Razor Code:
@{ var columnWidth = 150; }

@(Html.Kendo().Grid<YourCustomObjectModel>()
    .Columns(c =>
    {
        c.Template(@<text></text>)
.ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='chkbx' />")
            .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
            .Width(80);
        c.Bound(s => s.SomeColumnOne)
            .Title("One")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnTwo)
            .Title("Two")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnThree)
            .Title("Three")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnFour)
            .Title("Four")
            .Width(columnWidth);
    })
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .Read(r => r.Action("YourReadAction", "YourControllerName"))
    .Name("YourGridName")
    .Scrollable()
    .Sortable()