New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Edit Hierarchical Grids with Checkboxes

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

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

Solution

You can achieve this requirement using the following implementation:

  1. 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);
  2. Handle the click event of the checkboxes and update the IsCompleted field based on the respective checkbox state:

    JS
    $(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.

More ASP.NET MVC Grid Resources

See Also