Kendo UI Grid with Two Kinds of Checkboxes

By July 31, 2016Kendo UI

In my last blog, I showed some examples of dates in a Kendo UI Grid. This time, let’s look at checkboxes. True/False data in the Kendo UI Grid is always interesting to work with. A checkbox makes sense for boolean values, but checkboxes come with some expectations from the user’s point of view. They see a checkbox, and they want to be able to click it! Entering an Edit mode and then clicking the checkbox just doesn’t cut it.

But getting the checkbox just right inside the grid isn’t as easy as it sounds.

Editing without Edit Mode

Ideally, we want the user to be able to click the checkbox, see the checkmark appear, and have the underlying data item property value reflect the new value. No edit mode, no additional clicks, just the same basic operation as a checkbox appearing anywhere else in the page.

Telerik’s documentation provides a starting point for a simple editable checkbox. We know we can create a checkbox column using a template, which in this case I have put inline in the grid declaration.

Next we need a handler to translate those checkbox events to the data items

Ok, that’s great, now we have clickable checkboxes.

2016-07-31 17_31_58-Kendo UI Grid with Custom Checkbox - JSFiddle

Taking it Further

But the visual experience of a default checkbox leaves a little to be desired. I think we can do better. Our own Falafel blog archive includes an example for a custom Kendo checkbox widget. Can we combine all of these bits and pieces to get custom checkboxes in our Kendo UI Grid?

Yes, yes we can.

2016-07-31 17_41_04-Kendo UI Grid with Custom Checkbox - JSFiddle

To generate the widget checkboxes, we can use the databound event, and we can also handle the change event of the generated widget to set the value of the underlying data item.

We will use a separate template this time, but the concept is the same.

Here’s the full example you can try out for yourself:

The following two tabs change content below.