Kendo UI Grid with Custom Checkboxes: Take 2

By August 18, 2016JavaScript, Kendo UI

In my last post, Kendo UI Grid with Two Kinds of Checkboxes, I showed how to use a custom Kendo widget ‘Checkbox’ in a boolean grid column. Since then, I’ve been working with a few similar grids and I found that my original approach works well, but only if you don’t have edit mode enabled for the rest of the grid.

Well, nothing like a little problem to inspire a new post!

The Problem

So, what’s going on? Well, edit mode in the Kendo UI Grid overwrites the Kendo Widget that we created using our databound event. So, when the user clicks not on the checkbox, but next to it (or tabs to the cell in edit mode), the default editor is displayed instead of our lovely checkbox:

2016-08-17 22_14_09-Kendo UI Grid with Custom Checkbox - JSFiddle

Not good! Time to update our approach.

The Solution

I tried several workarounds for this, but what I finally settled on is to move the creation of the checkboxes out of the databound event altogether, and into a template function. Then we can use this function to create both the normal and edit mode elements, and ensure that to the user, they look the same.

If this looks familiar, it’s because it is basically a modified version of the widget creation code used for the widget version of the checkbox. We create the elements that will result in the input-plus-label setup that will display nicely with our svgs.

Then, we call this function as part of our column initialization:

And now, there’s no delay for the visuals, and no amount of clicking or entering/exiting edit mode will show anything but the ‘pretty’ checkboxes.

Here is our edit mode now:

2016-08-17 23_01_38-Kendo UI Grid with More Custom Checkbox - JSFiddle

Much, much better.

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

If you like this post, check out some of Falafel’s other blogs for KendoUI tips and problem-solving.

The following two tabs change content below.