Kendo UI DropDownList With Grid

Create a Kendo UI DropDownList that displays a Grid in the dropdown.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="grid" style="width:800px;"></div>
<input id="dropdown"></input>

JavaScript

var _dropdown = null;
var _grid = null;
alert("01");
_dropdown = $("#dropdown").kendoDropDownList({
    dataSource: [{ text: "", value: "" }],
    dataTextField: "text",
    dataValueField: "value",
    open: function (e) {
    console.log(_grid.element,_grid);
        // If the grid is not visible, then make it visible.
        if (!$(_grid.element).hasClass("k-custom-visible")) {
            $(_grid.element).slideToggle('fast', function() {
          _dropdown.close();
                $(_grid.element).addClass("k-custom-visible");
                      
            });
        }
    }
}).data("kendoDropDownList");
var $dropdownRootElem = $(_dropdown.element).closest("span.k-dropdown");
alert("1");
_grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        serverFiltering: true,
        serverPaging: true,
        pageSize: 5,
        transport: {
            read: "http://services.odata.org/Northwind/Northwind.svc/Customers"
        }
    },
    columns: [
        {
            field: "CompanyName"
        },
        {
            field: "ContactName"
        },
        {
            field: "ContactTitle"
        },
        {
            command: ["edit","destroy"],
            title: "&nbsp;",
            width: "210px"
        }
    ],
    selectable: true,
    pageable: true,
    editable: "inline",
    change: function (e) {
        setTimeout(function() {
            var tr = $(_grid.element).find("tr.k-state-selected");
            
            if (tr.length > 0 && tr.hasClass("k-grid-edit-row") === false) {
                // Get the selected row.
                var customer = _grid.dataItem(tr);
                // Display the text for the selected row in the dropdownlist.
                $dropdownRootElem.find("span.k-input").text(customer.CompanyName);

                $(_grid.element).slideToggle('fast', function() {
                    $(_grid.element).removeClass("k-custom-visible");
                });
            }
       ...