New to Telerik UI for ASP.NET Core? Download free 30-day trial

Configuring Editable Checkbox Columns in the Grid

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.

  5. 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.

    @(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")
    )
)
    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

See Also

In this article