KendoUI Radio Buttons: how to


My previous posts where about checkboxes and multi choice checkboxes in KendoUI. I started with a simple checkbox where you can select or not one option (boolean true or false). Then I presented the case where multiple option can be selected, each option is a boolean representing if the option is selected or not but it is represented as an array of those that are selected. In this post I explain how to implement mutually exclusive options: only of them can actually be selected.

KendoUI radio buttons
KendoUI radio buttons

KendoUI radio buttons

Define a data structure that hold the status of which radio button is selected and then bind it to the radio input elements.

var data = kendo.observable({
    radio:"Checkbox 2"
});
kendo.bind($("#main-window"), data);

The HTML looks like this:

<div id="main-window">
    <div>
        <label>
            Option1
            <input type="radio" name="radio" value="Checkbox 1" data-bind="checked: radio"/>
        </label>
    </div>
    <div>
        <label>
            Option2
            <input type="radio" name="radio" value="Checkbox 2" data-bind="checked: radio"/>
        </label>
    </div>
    <div>
        <label>
            Option3
            <input type="radio" name="radio" value="Checkbox 3" data-bind="checked: radio"/>
        </label>
    </div>
</div>

The value defined for each input field is the value that is going to be stored in the bound variable, while name allows me to group radio buttons that are mutually exclusive. Now, if I check one radio button, the current select radio button with the same name will be unchecked.

Using the same code for displaying the content of data I get the following capture:

Advertisements

2 thoughts on “KendoUI Radio Buttons: how to

  1. i am using template for radio button how can i get the selected node name and id
    here is the my code

    jQuery.getJSON(treeUrl, function (data) {
    jQuery(“#treeview”).kendoTreeView({
    checkboxes: {
    checkChildren: false,
    template : “”,
    },
    dataSource: {
    data: data
    },

    dataTextField: “text”,
    dataValueField: “id”
    });
    });

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