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:

        <input type="checkbox" value="Checkbox 1" data-bind="checked: array"/>
        <input type="checkbox" value="Checkbox 2" data-bind="checked: array"/>
        <input type="checkbox" value="Checkbox 3" data-bind="checked: array"/>

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s