KendoUI Check Boxes: how to


I’m going to show you how easily display a KendoUI styled checkbox controlled by a boolean variable.

This is actually part of a series of blogs on KendoUI bindings that I hope you will help you understand the most important types of binding and how/when to use them.

KendoUI checkboxes

As you probably have realized there is no specific widget for rendering checkbox, same happens with Text Box (see here on how to get text boxes consistently styled). However, for checkboxes there are no such “styled” version and it is always rendered as you browser wants to do.

KendoUI checkbox
KendoUI checkbox

KendoUI checkbox binding

Ok! no styling but how to bind it to a boolean variable for controlling it?

Somewhere in KendoUI documentation should be information about the different options that you have for data-bind in you HTML5: but, it is not easy to find!

There is one type of binding called checked that (afaik) is only used for check boxes and radio buttons (covered it in a following post). This bind allows you to control the status of a checkbox depending on the value of a variable (or the result of evaluating a function). Here is how it works…

KendoUI checkbox bind to a boolean

Start with the following HTML code:

<div class="k-group k-popup ob-group" id="blog">
    <label>
        Checkbox variable:
        <input type="checkbox" data-bind="checked: option1"/>
    </label>
</div>

I created an input field of type checkbox and added the attribute data-bind with the value checked: option1 that means that attribute checked depends on the value of option1 that should be bound to this input element.

The following JavaScript defines option1 and bounds it to the input:

var data = kendo.observable({
    option1:true
});
kendo.bind($("#blog"), data);

Getting:

KendoUI checkbox
KendoUI checkbox

Not different than what we initially got but if we add some debugging code to display the value of the controlling variable, we will see that it actually changes depending on option1. I define a dumping area that when clicked displays the content of data.

<div class="k-group k-popup ob-group" id="blog">
    <label>
        Checkbox variable:
        <input type="checkbox" data-bind="checked: option1"/>
    </label>
</div>

<div class="k-group k-popup ob-group"
     id="dump-area"
     onclick='$("#dump-area").html(JSON.stringify(data))'>
    Click here to show content of 'data'.

and the complete JavaScript:

var data = null;
$(document).ready(function () {
    data = kendo.observable({
        option1:true
    });
    kendo.bind($("#blog"), data);
});

NOTE: I’ve made data global in order to be able to display the content when clicking on the dump area.

KendoUI checkbox controlled by a boolean variable
KendoUI checkbox controlled by a boolean variable

KendoUI checkbox bind to a function

As I already mentioned the value of checked defined in data-bind does not have to be a boolean variable, it might also be a function returning a boolean.

Here I define my model having a variable option1 but the value initially displayed is actually the result of doing some arithmetics with option1 (check if option1 is multiple of 10):

var data = kendo.observable({
    option1:100,
    option1Fn:function () {
        return this.option1 % 10 == 0;
    }
});
kendo.bind($("#blog"), data);

While the HTML is:

<div class="k-group k-popup ob-group" id="blog">
    <div>
        <label>
            Multiple of 10:
            <input type="checkbox" data-bind="checked: option1Fn"/>
        </label>
    </div>
</div>

Where you can see that I’ve defined the value for checked as option1Fn a function that is now defined in the data structure bound to this input.

IMPORTANT: The value of the checkbox is the result of evaluating the function BUT you can check on the checkbox and the function is no re-evaluated. Same happens if the controlling variable changes and the checkbox is not updated via the variable.

In the following example I’ve added the same code for displaying the content of data (see KendoUI checkbox bind to a boolean above) and even that initially the checkbox was checked (100 is multiple of 10) then I unchecked it and data contains a new field that is the name of the function with the status of the checkbox.

KendoUI checkbox initially controlled by a function
KendoUI checkbox initially controlled by a function
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s