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

Edit Hierarchical Grids with Checkboxes

Environment

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

Description

How can I edit boolean fields using checkboxes in hierarchical Grids?

Solution

You can achieve this requirement using the following implementation:

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

Razor

columns.Template(t => { })
.ClientTemplate("<input type='checkbox' \\#= IsCompleted ? checked='checked':'' \\# class='chkbx' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);

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

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

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

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

Edit Hierarchical Grids with Checkboxes

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also