Dragging from a Grid to a TreeView

[AP]

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;">

    @(Html.Kendo().TreeView()
                    .Name("Treeview")
                    .ExpandAll(true)
                    .HtmlAttributes(new { style = "display: inline-block;" })
                    .DataTextField("Text")

                    .DataSource(ds=>ds
                        .Model(m=>m
                            .Id("Id")
                            .HasChildren("HasChildren")
                            .Children("Items")

                            )

                    .Read(r => r.Action("GetMenuTreeItems", "Menu")

                            )
                            )
    )

</div>

<div class="pull-left" style="width:500px;">
    @(Html.Kendo().Grid<BI_II.Models.SSRS_Report>()
.Name("Grid")
.Columns(col =>
    {
        col.Bound(o => o.Name).Title("Name");
        //col.Bound(o => o.ItemID).Title("ItemID");
    })

  .DataSource(ds => ds
    .Ajax()
    .Model(m => m.Id(p => p.ItemID))
    .PageSize(15)
        .Read(rd => rd.Action("RD_ReportList", "Menu")
    )
)
.Pageable()
.Sortable()
.Filterable()

    )
</div>
<script>

    $(document).ready(function () {

        var grid = $("#Grid").data("kendoGrid"),
             treeview = $("#Treeview").data("kendoTreeView"),
            itemUID;

        grid.table.kendoDraggable({
            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>');
            }
        });

        treeview.element.kendoDropTarget({
            group: "Grid",
            drop: function (e) {

                var model = grid.dataSource.getByUid(itemUID);

                 treeview.append({ Text: model.Name, Id: model.ItemID });



                itemUID = null;
            }
        });

    });
</script>

 This currently just appends into the TreeView root node.

 Thanks

[Daniel]

Hello,

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.

treeview.element.kendoDropTargetArea({
    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);
    }
});

Regards,
Daniel
Telerik