Configuring Editable Checkbox Columns in the Grid
Environment
| Product | Telerik UI for ASP.NET MVC Data Grid |
| Progress Telerik UI for ASP.NET MVC 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:
- Use the
ClientTemplateproperty of the column to configure a checkbox input that is checked based on the value of the column. - Handle the
clickevent of the input. - In the handler, get the HTML parent row of the clicked input and pass it to the
dataItemmethod to access thedataItemof the row. -
Utilize the
setmethod of thekendo.data.Modelto programmatically change the value of thedataItemBoolean field.If in the
Modelconfiguration of the DataSource the field is configured to be non-editable, thesetmethod won't have effect. To prevent double editing, configure a JavaScript function to disable the editing of the column and pass it at the
Editableconfiguration 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.