Permit drag from ListView and drop to Diagram

[Scott Peal]

Sometimes we have list of things, say servers, which all have the same diagram node details expect for the label (server name). It would be great to show a list of the servers then drag and drop this to the diagram. I can do this with DiagramShapes.Text, FlowShapes.Annotation settings to show in a palette; however, it doesn't let me set the dropped diagram node to something else like a basic shape rectangle with a label in it. 

By using a ListView as a palette source, we can also let the user type in a search to look for a particular server out of the hundreds of servers. We currently can't do this with palettes.

I know they have drag and drop working in ListView now. Just need to married these two controls together.

Thanks for the consideration for the next version!

[Aravind Ravi]

Hi Scott, 

We have checked with respective team that currently in ListView they does not have drag and drop support. In list box only they have support for drag and drop support. So please confirm us whether you want to have combine list view or list box control with diagram. 

Regards 

Aravind Ravi 

[Scott Peal]

ListBox would be fine and awesome also! Any chance we can get that feature added?

[Aravind Ravi]

Hi Scott, 

We have created a sample to drag a node from treeview and drop the node in the diagram. In the listbox we can able to drag and drop the node from list box to list box only. So that we have combine both diagram and treeview together. In the sample we have created a tree view and diagram. When drag and drop a node from tree view to diagram OnNodeDragged Event gets fired. In that event set the node id through DraggedNode args. In the event gets the node offsetX and offsetY value through Event args. Please find the below code snippet for how to add node on OnNodeDragged event 

<SfTreeView TValue="TeamDetails" AllowDragAndDrop="true"> 

            <TreeViewFieldsSettings TValue="TeamDetails" Id="Id" Text="Name"  DataSource="@Team" Expanded="Expanded"> 

            </TreeViewFieldsSettings> 

            <TreeViewEvents TValue="TeamDetails" OnNodeDragged="@nodeDropped"></TreeViewEvents> 

        </SfTreeView> 

        public void nodeDropped(DragAndDropEventArgs args) 

    { 

        diagram.BeginUpdate(); 

        Dictionary<string, object> value = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, object>>(args.Event.ToString()); 

        double x = Convert.ToDouble(value["screenX"]); 

        double y = Convert.ToDouble(value["screenY"]); 

        if (args.DraggedNode != null) 

        { 

            DiagramNode node = new DiagramNode() 

            { 

                Id = args.DraggedNode.ID, 

                OffsetX = x - 415, 

                OffsetY = y, 

                Width = 100, 

                Height = 100, 

                Annotations = new ObservableCollection<DiagramNodeAnnotation>() 

                { 

                    new DiagramNodeAnnotation() 

                    { 

                        Content = args.DraggedNodeData.Text, 

                        Offset = new NodeAnnotationOffset() { X = 0.75, Y = 0.5} 

                    } 

                } 

            }; 

            diagram.Nodes.Add(node); 

            diagram.EndUpdate(); 

        } 

    } 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://www.syncfusion.com/downloads/support/forum/154300/ze/List-Diagram1604544212 

Regards 

Aravind Ravi 

[Scott Peal]

Thanks a lot! This is what I needed. You rock!

[Aravind Ravi]

Hi Scott, 

Thanks for your update. 

Regards 

Aravind Ravi