Configuring Editable Checkbox Columns in the Grid

Updated over 6 months ago

Environment

Product	Telerik UI for ASP.NET Core Data Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.1.117 version

Description

In my Data Grid, I have a Boolean field bound to a column. How can I show an always active checkbox input to enable the user to check or uncheck it without triggering the edit event of the Grid?

Solution

To bind a Boolean field of the Model to a Grid column with always active checkboxes:

1. Use the ClientTemplate property of the column to configure a checkbox input that is checked based on the value of the column.
2. Handle the click event of the input.
3. In the handler, get the HTML parent row of the clicked input and pass it to the dataItem method to access the dataItem of the row.
4. Utilize the set method of the kendo.data.Model to programmatically change the value of the dataItem Boolean field.

If in the Model configuration of the DataSource the field is configured to be non-editable, the set method won't have effect.

4. To prevent double editing, configure a JavaScript function to disable the editing of the column and pass it at the Editable configuration of the column.

Razor

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Discontinued).Title("Discontinued").Width(130)
                            .ClientTemplate("<input id='instock_#=data.ProductID#' type='checkbox' #=Discontinued?'checked':''# onclick='setValue(this)' />").Editable("returnFalse");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
    })
    .Height(700)
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Discontinued);
            model.Field(p => p.TotalSales).Editable(false);

        })
        .Create("DetailProducts_Create", "Grid")
        .Read("DetailProducts_Read", "Grid")
        .Update("DetailProducts_Update", "Grid")
        .Destroy("DetailProducts_Destroy", "Grid")
    )
)

JavaScript

    function setValue(input){
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem($(input).closest("tr"));
        var checked = $(input)[0].checked;
        dataItem.set("Discontinued",checked);
    }
    function returnFalse() {
        return false;
    }

To explore the complete behavior, see the Telerik REPL example on how to display a message upon a server response to the Update, Create, and Destroy requests performed by the Data Grid.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base