Drag and drop item from Grid to Tree

4 posts, 0 answers
  1. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 06 Mar 2012 Link to this post

    Hello,

    I am currently evaluating the KendoUI product against other toolsets. I am looking to be able to drag and drop an item from the grid to the tree view. I seem to have almost everything working except for finding out what element I am hovering over in the tree. 

    I have debugged the code below in Chrome and I am able to see the text of the item I am hovering over but not the id I assigned to it. The application I am working on can have the same folder name in different parent folders. 

    Any suggestions as to how to get this to work? I would really like to use KendoUI but this seems to be a deal breaker.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Viewer</title>
     
        <script src="../../Scripts/kendoUI/jquery.min.js" type="text/javascript"></script>
        <script src="/Scripts/kendoUI/kendo.all.min.js" type="text/javascript"></script>
        <link href="../../Content/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="../../Content/styles/kendo.default.min.css" rel="stylesheet" />
        <script src="../../Scripts/kendoUI/people.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <section id="main" >
                <div id="example" class="k-content" style="height: 650px;">
                    <div id="horizontal" style="height: 100%; width: 100%;">
                         <div id="vertical">
                            <div>
                                <p>
                                    Inner splitter :: Top
                                </p>
                            </div>
                            <div>
                               <ul id="treeview">
                                <li id="3.6" data-expanded="true">Item 1
                                    <ul>
                                        <li id="1.6">Item 1.1</li>
                                        <li id="2.6">Item 1.2</li>
                                        <li id="9.6">Item 1.3</li>
                                    </ul>
                                </li>
                                <li id="4.6">Item 2
                                    <ul>
                                        <li id="7.6">Item 2.1</li>
                                        <li id="5.6">Item 2.2</li>
                                        <li id="6.6">Item 2.3</li>
                                    </ul>
                                </li>
                                <li id="8.6">Item 3</li>
                            </ul>
                            </div>
                        </div>
                        <div>
                            <div id="grid" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                </div>    
     
                <script>
                    function droptargetOnDrop(e) {
                        var treeView = $("#treeview").data("kendoTreeView");
                        var selectedNode = treeView.select();
     
                        treeView.append({ text: "Add test node..." }, selectedNode);
                    }
     
                    $(document).ready(function () {
                        $("#vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                { collapsible: true, size: "50%" },
                                { collapsible: true, size: "50%" }
                            ]
                        });
     
                        $("#horizontal").kendoSplitter({
                            panes: [
                                { collapsible: true, size: "20%" },
                                { collapsible: true, size: "80%" }
                            ]
                        });
     
                        $("#treeview").kendoTreeView({
                            dragAndDrop: true
                        });
     
                        $("#grid").kendoGrid({
                            dataSource: {
                                data: createRandomData(50),
                                pageSize: 10
                            },
                            selectable: true,
                            groupable: true,
                            scrollable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            }, {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            }, {
                                width: 100,
                                field: "City"
                            }, {
                                field: "Title"
                            }, {
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            }, {
                                width: 50,
                                field: "Age"
                            }
                            ]
                        });
                    });
     
                    $("#grid").kendoDraggable({
                        filter: "tr",
                        hint: function () {
                            var g = $("#grid").data("kendoGrid")
                            return g.select().clone()
                        }
                    });
     
                    $("#treeview").kendoDropTarget({
                        drop: droptargetOnDrop
                    });
                </script>
            </section>
            <footer>
            </footer>
        </div>
    </body>
    </html>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Mar 2012 Link to this post

    Hi Lucas,

    You could use jQuery to retrieve the hovered item id. For example:
    $("#treeview li").kendoDropTarget({
        dragenter: droptargetOnDragEnter
    });
     
    function droptargetOnDragEnter(e) {
        console.log($(e.target).closest(".k-item").attr("id"));
    }

    I hope this information will help you to deal with the problem.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 08 Mar 2012 Link to this post

    Hi Alexander,

    Thanks for the quick reply. The solution you provided to get the selected item worked. I am able to get drag and drop to work with a single item. The problem I am now facing is drag and drop of multiple items.

    When I turn on multi-select in the kendo grid, by default it enables a multi-select drag box that alows you to click and drag over the number of rows you would like to select. This really interferes with drag and drop. Is there any way to keep multi select on with click + control but remove the multi-select drag box?

    If you have any other way to multi-select and drag items to a tree please let me know.

    Thank you for your time!

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Mar 2012 Link to this post

    Hello Lucas,

    Currently it is not possible to turn off this feature in multiple select mode and I am afraid we cannot propose a custom solution for that scenario. I would suggest to post this as a feature request in KendoUI UserVoice so the community can vote and evaluate the idea. If there are more people requesting such functionality, we will rise its priority.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready