Dragging from a Grid to a TreeView

2 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 12 May 2015 Link to this post

    From an example in another thread, I was able to enable dragging from a grid onto a TreeView control.

    However, the example just fired an alert with the ID of the object that was dragged. What I need to do is insert the dragged row into the TreeView . I can use the append method to add to the TreeView , but can't work out how to identify the node that the grid record was dragged onto.


    My current client code is:-

    <div class="pull-left" style="margin-right:20px;">
                        .HtmlAttributes(new { style = "display: inline-block;" })
                        .Read(r => r.Action("GetMenuTreeItems", "Menu")
    <div class="pull-left" style="width:500px;">
    .Columns(col =>
            col.Bound(o => o.Name).Title("Name");
            //col.Bound(o => o.ItemID).Title("ItemID");
      .DataSource(ds => ds
        .Model(m => m.Id(p => p.ItemID))
            .Read(rd => rd.Action("RD_ReportList", "Menu")
        $(document).ready(function () {
            var grid = $("#Grid").data("kendoGrid"),
                 treeview = $("#Treeview").data("kendoTreeView"),
                cursorOffset: {
                    top: 5,
                    left: 5
                filter: "tbody > tr",
                group: "Grid",
                hint: function (e) {
                    itemUID = e.attr(kendo.attr("uid"));
                    return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                group: "Grid",
                drop: function (e) {
                    var model = grid.dataSource.getByUid(itemUID);
                     treeview.append({ Text: model.Name, Id: model.ItemID });
                    itemUID = null;

     This currently just appends into the TreeView root node.


  2. Answer
    Daniel avatar
    2109 posts

    Posted 14 May 2015 Link to this post


    The simplest option is to use DropTargetArea with a filter for the treeview nodes. This way the dropTarget will be the node. Also, it is not necessary to use the hint to get the row uid. You can get the row from the draggable e.g.
        filter: ".k-item",
        group: "Grid",
        drop: function (e) {
            var model = grid.dataItem(e.draggable.currentTarget);
            var node = e.dropTarget;
            treeview.append({ Text: model.Name, Id: model.ItemID }, node);

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
Back to Top