Way to access the underlying data item when a draggable is dropped into a Diagram.

[Nate]

Hi--

 I am using a Diagram to display a tree-like structure using a HierarchicalDataSource.

 I now need to have a set of Draggable items that users can drag into the Diagram (the visible elements in the diagram are drop targets). When the user drops an item onto the diagram, I want to insert a new data item as a child of the corresponding part of the datasource, then redraw the diagram. 

 My problem so far is that I don't know how to get the underlying data item (the item in the datasource that the dropTarget, which is a Group in the diagram, represents). When I pause my debugger during the "drop" event and inspect the dropTarget property of the drop event, I only see ways to look at the SVG elements. I don't see a way to get the underlying data value which spawned the visual diagram objects. 

 I am using a VisualTemplate to draw the diagram, and I thought that maybe I could provide an id attribute to the diagram Group, which would then end up in the generated SVG markup (the "g" element for the diagram Group), but I don't see a way to do that.

 So far all I can think of is to "print" an ID using a TextBlock in the Group, using teeny tiny type the same color as the background color so that it is "invisible". Then when the drop event occurs, I would parse the ID out from the textContent property of the drop target (which is an svg "g" element at that moment). Then I could look up the corresponding data item myself, which would get me what I need. Seems like a terrible hack though. I feel like I have probably missed some part of the API which would make this relatively straightforward.

 Any solution which allows me to look up the original data item would be fine. The "click" event for a Diagram element provides a "dataItem" property, which is great for click events. I just need something similar for drop events. 

 I think this would be straightforward if I was displaying the tree-like structure as a TreeView rather than a Diagram. Unfortunately the UI calls for a Diagram-like display.

 Thank you for any help.

[Daniel]

Hello,

There aren't any methods that can be used to get a shape by element. A possible solution is to get the shape by the position:

drop: function (e) {
    var diagram = $("#diagram").data("kendoDiagram");
    var point = diagram.documentToModel(new kendo.dataviz.diagram.Point(e.pageX, e.pageY));
    var shape;
    for (var i = 0; i < diagram.shapes.length; i++) {
        if (diagram.shapes[i].bounds().contains(point)) {
            shape = diagram.shapes[i];
            break;
        }
    }

    var dataItem = shape.dataItem;
}

Regards,
Daniel
Telerik