Custom template in kendo-ui grid column with inconsistent data type

Question

I need to use kendo-ui grid for data editing. Problem is that every possible item in returned response is string, but which contains other types of value (eg Value = "true" or Value = "32%" or Value = "[0:standard, 1:advanced]").

So I need to set up template on grid to correspond different data type within string. So for true/false i have to have checkbox, for 32% it should provide text box but with percent validation, for array response it needs to be a drop down.

I managed to set up drop down and text box options using editor, but I cannot make checkbox to handle properly in any way. Checkbox is displayed as expected, but whatever I try it won't bind data to the grid after grid is saved. (it is always not checked, regardless of value)

Here is code snippet of column "value" and what I used for template (item.type === "3" is boolean).

                        field: 'value',
                        title: 'value',
                        headerAttributes: {
                            'class': 'table-header-cell'
                        },
                        template: function (item) {
                                if (item.type === "3") {
                                    var boolValue = (/true/i).test(item.value);
                                    item.value = boolValue;
                                    return  '<input id="' + item.name+ '" type="checkbox" #= value ? \'checked="checked"\' : "" # class="chkbx" />';
                                } else {
                                    return ''; //this will follow for other types
                                }
                            },

Thanks in advance.

The Dread Pirate Stephen The Dread Pirate Stephen · Accepted Answer · 2018-06-19T17:29:05

When the template definition is a function, you don't need to use the # markers to differentiate between markup and javascript like you do when you are defining a kendo template using kendo's template language or a string directly.

This is because inside the function it is always javascript and the # markers are only directives in the kendo templating language.

So, simplify your template to just:

template: function (item) {
  return  '<input class="chkbx" id="' + item.name + '" type="checkbox"' + (item.value ? 'checked="checked"' : '') + '/>';
}

I've left out the other datatype handling for simplicity.

Then, you need to add code to push the checkbox changes into the grid's datasource when they occur:

$("#grid").on("click", ".chkbx", function () {
    var $checkBox = $(this),
    checked = $checkBox.is(":checked"),
    dataItem = grid.dataItem($checkBox.closest("tr"));

    dataItem.set("value", checked);
});

This is a technique that I am currently using in production code.

Dojo example

It may also be possible to use the kendo MVVM bindings in your template for a more elegant solution instead of the explicit click handler, but I'd have to experiment more with that to figure it out.

Custom template in kendo-ui grid column with inconsistent data type

1 Answers