KendoUI multi-option Check Boxes: how to


In my previous post I explained how, using KendoUI, you can create and manage checkboxes bound to a boolean variable.

This time I’m going to explain how to use and manage checkboxes controlled by an array i.e. how to manage multi-choice checkboxes.

KendoUI multichoice options

KendoUI checkbox bound to an array

It is actually pretty simple: instead of binding the checkboxes to a boolean variable, I just bind it to an array:

var data = kendo.observable({
    array:["Checkbox 2", "Checkbox 3"]
});

kendo.bind($("#main-window"), data);

The values initially contained in the array correspond to the checkboxes initially checked.

The difference in the HTML is that for each possible checkbox option, I have defined a value:

<div>
    <label>
        Option1
        <input type="checkbox" value="Checkbox 1" data-bind="checked: array"/>
    </label>
</div>
<div>
    <label>
        Option2
        <input type="checkbox" value="Checkbox 2" data-bind="checked: array"/>
    </label>
</div>
<div>
    <label>
        Option3
        <input type="checkbox" value="Checkbox 3" data-bind="checked: array"/>
    </label>
</div>

If I add some code to show the content of data when Option1 and Option2 are checked I get:

KendoUI multichoice checkboxes

and I check only Option3:

KendoUI multichoice checkboxes

We see that array in data is magically updated.

Advertisements