New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit Grids with Checkboxes in Batch Edit Mode

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit boolean fields using checkboxes in batch editable Grids?

Solution

You can achieve this requirement using the following implementation:

Define a template column that contains a checkbox element and set its checked attribute based on the value of the IsAdmin field:

Razor

@(Html.Kendo().Grid<Person>()
    .Name("persons")
    .Columns(columns =>
    {
        columns.Template(@<text></text>)
        .ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
        .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
        .Width(200);
    })
    .Editable(ed => ed.Mode(GridEditMode.InCell))
    .ToolBar(tb => tb.Save())
    ... // Additional configuration.
)

Handle the click event of the checkboxes and update the IsAdmin field based on the respective checkbox state:

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

    function checkAll(ele) {
        var state = $(ele).is(':checked');
        var grid = $('#persons').data().kendoGrid;
        $.each(grid.dataSource.view(), function () {
            if (this['IsAdmin'] != state)
                this.dirty = true;
            this['IsAdmin'] = state;
        });
        grid.refresh();
    }

To review the complete example, refer to the project on how to create a template Grid column with a checkbox that updates the underlying model when its state is changed.

Edit Grids with Checkboxes in Batch Edit Mode

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also