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

In Grid batch editing how to add treeview within dropdown

1 Answer 52 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, 09:00 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 positioned with respect to dropdown 
can you suggest any smoother and simple 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:17 PM
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
 
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