In Grid batch editing how to add treeview within dropdown

[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 positioned with respect to dropdown 
can you suggest any smoother and simple solution for this problem.
http://www.telerik.com/forums/treeview-in-dropdownlist

[Vladimir Iliev]

Hi Kevin,

I already answered to this query in duplicated forum post created by you - #846308. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.


Regards,
Vladimir Iliev
Telerik