Kendo dataSource complex filtering example

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="grid"></div>

 

<div>
<input id="dropdownList" runat="server" /></div>
<script type="text/x-kendo-template" id="CheckboxTemplate">
    <li unselectable="off" class="k-item nowrap check-item">
        <input type="checkbox" name="#= text #" value="#= value #" class="check-input" #= selected ? "checked" : "" #/>
        <span>#= text #</span>
    </li>
</script>

CSS

p {
 color: blue;   
}

JavaScript

$(document).ready(function () {

        var data = [
      { text: "10248", value: "", selected: false },
      { text: "10249", value: "1", selected: false },
      { text: "10250", value: "2", selected: false },
      { text: "10251", value: "3", selected: true },
      { text: "10252", value: "4", selected: false },
      { text: "10253", value: "5", selected: false }
      ];

        dropdown = $("#dropdownList").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            template: $("#CheckboxTemplate").html(),
            dataSource: data,
            placeholder: "Select...",
            select: function (e) {
                e.preventDefault();
            }
        }).data("kendoDropDownList");

        dropdown.list.find(".check-input,.check-item").bind("click", function (e) {
            var $item = $(this);
            var $input;

            if ($item.hasClass("check-item")) {
                // Text was clicked
                $input = $item.children(".check-input");
                $input.prop("checked", !$input.is(':checked'));
            }
            else
            // Checkbox was clicked
                $input = $item;

            // Check all clicked?
            if ($input.val() == "")
                dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));

            updateDropDown()

            e.stopImmediatePropagation();
        });

        updateDropDown();
    });
    function updateDropDown() {
        var items = [];

        dropdown.list.find(".check-input").each(function () {
            var $input = $(this);
            if ($input.val() != "" && $input.is(':checked'))
                items.push($input.next().text());
        });
        // Check the Check All if all the items are checked
        $(dropdown.list.find(".check-input")[0]).prop("checked", items.length == dropdown.list.find(".check-input").length - 1);
        dropdown.text(items.toString());
   ...