My Love Hate Relationship with Kendo Grid — Part 2: The Checkbox Column
This is a story of love and how to implement a checkbox column in a Kendo Grid.
Some technical info on today’s tryst with Kendo:
* Telerik.UI.for.AspNet.Core Version=”2020.2.617" ( Yes I should update it)
Kendo Grid allows the use of ClientTemplates, we are going to create a helper method to generate our templates so we can use them on any grid.
The above is a simple helper which we pass in the property name as you can see we have 2 methods one for AutoSync and for normal.
The reason for this is when not using AutoSync we need to show that the cell has modified(dirty).
EXAMPLE (GridEditMode.InCell, AutoSync(true))
Now we just need to hook up some JS to make it all work.
With a Kendo Grid in GridEditMode.InCell when a cell is clicked it loads the EditorTemplate for that cell. We need to modify the behavior so that a click on the cell is treated as a click on the checkbox. We add a click event listener on the grid for all cells that contain the data-field with that specific property.
We then check what target was clicked,
* the cell(td)
* checkbox(input)
In the case of the cell we check/uncheck the checkbox and if the checkbox was clicked we do nothing(the browser has checked/unchecked it for us).
The last part is to update the dataItem on the grid. We find the closest cell(td) and get the data-field value to update. Then we set the value for the property to that of the checkbox.
If there are multiple checkbox columns on the grid we can register the events via a loop.
EXAMPLE (GridEditMode.InCell, AutoSync(false))
Using the second helper method we add a call to the JS method dirtyField in the client template.
This adds the indication for the user that the cell has been modified and they need to click save.
The function dirtyField came from the following Telerik Page https://docs.telerik.com/kendo-ui/knowledge-base/grid-with-checkbox-column#use-checkbox-column-templates-and-edit
