In Grid batch editing how to add dropdown with treeview

[Kevin Smith]

Html :
<div id="grid"></div
 <div id="treeview"></div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Grid Column format:
columnSchema.push({ field: "Type", title: "Type", filterable: true, locked: false, lockable: true, width: 120, editor: typeDropDownEditor, template: "#=Type#" });
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Method:
        function typeDropDownEditor(container, options) {
           $("#treeview").kendoTreeView({
                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
        
            var dropdown = $('<input  id="dropdown"  />')
               .appendTo(container)
               .kendoDropDownList({
                   dataSource: [{ text: "", value: "" }],
                   dataTextField: "text",
                   dataValueField: "value",
                   open: function (e) {
                       // If the treeview is not visible, then make it visible.
                       if (!$treeviewRootElem.hasClass("k-custom-visible")) {
                           $treeviewRootElem.slideToggle('fast', function () {
                               dropdown.close();
                               $treeviewRootElem.addClass("k-custom-visible");
                           });
                       }
                   }
               }).data("kendoDropDownList");
            initailizeDDTreeViewfunction(dropdown);
        }

function initailizeDDTreeViewfunction(DDObject) {

            var $dropdownRootElem = $(DDObject.element).closest("span.k-dropdown");

            var treeview = $("#treeview").kendoTreeView({
                select: function (e) {
                    // When a node is selected, display the text for the node in the dropdown and hide the treeview.
                    $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
                    $treeviewRootElem.slideToggle('fast', function () {
                        $treeviewRootElem.removeClass("k-custom-visible");
                    });
                }
            }).data("kendoTreeView");

            $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

            // Hide the treeview.
            $treeviewRootElem.width($dropdownRootElem.width()).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });

            // Position the treeview so that it is below the dropdown.
            $treeviewRootElem.css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

            $(document).click(function (e) {
                // Ignore clicks on the treetriew.
                if ($(DDObject.element).closest("div.k-treeview").length == 0) {
                    // If visible, then close the treeview.
                    if ($treeviewRootElem.hasClass("k-custom-visible")) {
                        $treeviewRootElem.slideToggle('fast', function () {
                            $treeviewRootElem.removeClass("k-custom-visible");
                        });
                    }
                }
            });
        }

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I have tried out this example but didn't work as tree view is not consistent and posioned with respect to dropdown 
can you suggest any smother solution for this problem.
http://www.telerik.com/forums/treeview-in-dropdownlist

[Vladimir Iliev]

Hi Kevin,

Currently nesting the treeView widget inside the dropDownList widget is not supported out of the box, however you can check the following Kendo UI Labs plugin,  provided by the Kendo UI community:

• KendoUI Labs: DropDownTreeView widget

Also please note that the above widget is considered as custom one and falls outside the scope of our support service.

Regards,
Vladimir Iliev
Telerik