This is a migrated thread and some comments may be shown as answers.

In Grid batch editing how to add dropdown with treeview

1 Answer 138 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin Smith
Top achievements
Rank 1
Kevin Smith asked on 04 Aug 2014, 08:48 PM
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






























1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 06 Aug 2014, 04:16 PM
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:

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Kevin Smith
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or