Option Group

by Ramesh Kanagaraj

HTML

<script src="http://cdn.kendostatic.com/2013.3.1030/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1030/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1030/styles/kendo.common.min.css">
With Option Group
<select id="required" multiple="multiple" data-placeholder="Select attendees...">
    <optgroup label='User Groups'>
        <option value="GRP:1">[Admins]</option>
        <option value="GRP:3">[Developers]</option>
        <option value="GRP:2">[Managers]</option>
        <option value="GRP:4">[QA]</option>
        <option value="GRP:0">[Users]</option>
    </optgroup>
    <optgroup label='Users'>
        <option value="USR:4">Admin</option>
        <option value="USR:9">Build Manager</option>
        <option value="USR:10">Developer One</option>
        <option value="USR:6">Development Manager</option>
        <option value="USR:8">Process Manager</option>
        <option value="USR:7">QA Manager</option>
        <option value="USR:11">QA One</option>
    </optgroup>
</select>Without Option Group
<select id="multiple" multiple="multiple"></select>

JavaScript

$(document).ready(function () {
    var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
    // data without option group
    var data = [{
        "optionName": "[Admins]",
            "optionvalue": "GRP:1"
    }, {
        "optionName": "[Developers]",
            "optionvalue": "GRP:3"
    }, {
        "optionName": "[Managers]",
            "optionvalue": "GRP:2"
    }, {
        "optionName": "[QA]",
            "optionvalue": "GRP:4"
    }, {
        "optionName": "[Users]",
            "optionvalue": "GRP:0"
    }, {
        "optionName": "",
            "optionvalue": ""
    }, {
        "optionName": "Admin",
            "optionvalue": "USR:4"
    }, {
        "optionName": "Build Manager",
            "optionvalue": "USR:9"
    }, {
        "optionName": "Developer One",
            "optionvalue": "USR:10"
    }, {
        "optionName": "Development Manager",
            "optionvalue": "USR:6"
    }, {
        "optionName": "Process Manager",
            "optionvalue": "USR:8"
    }, {
        "optionName": "QA Manager",
            "optionvalue": "USR:7"
    }, {
        "optionName": "QA One",
            "optionvalue": "USR:11"
    }];
    // multiple select box without option group
    var multiselect = $('#multiple').kendoMultiSelect({
        dataSource: data,
        dataTextField: 'optionName',
        dataValueField: 'optionvalue',
        select: function (e) {
            var item = e.item;
            var text = item.text();
            if (text == "") {
                e.preventDefault();
            }
        }
    }).data("kendoMultiSelect");
    multiselect.value(["USR:8"]);
});