Diagram Shape Reordering

1 Answer 72 Views
Diagram
Steve
Top achievements
Rank 1
Steve asked on 13 Sep 2021, 06:03 PM

I have setup a diagram using the Sugiyama Layout.  I have added  50  Rounded Rectangle shapes (without connectors)  in code behind.  I  am using the  following code to size the shapes to fit the diagram:

 Rect allShapesBounds = Diagram1.Shapes.GetEnclosingBounds();
 Rect inflatedRect = allShapesBounds.InflateRect(10, 10, 10, 10);
 Diagram1.BringIntoView(inflatedRect, false);
When I use the mouse to drag a shape into a different position, I would like all the other shapes compensate and adjust to :
  1. Allow the moved shape to fit in without over lapping
  2. Adjust to fill the empty spot

In the attached image Before.png you will see the 50 shapes all sized and lined up correctly.  The After.png shows I moved the shape with the #1 is overlapping the others and there is a space where it used to reside.  I tried calling the above code in the drag event handler but that returns the moved shape to it's original position.  What do I need to do to achieve the results listed above?

 

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 15 Sep 2021, 09:00 AM

Hello Steven,

The described functionality is not supported out of the box, but you can add some custom code to achieve it. You can use the DraggingService of RadDiagram in order to subscribe to the shape dragging events. Then, in the CompleteDragging event handler, you can call the layout method of the diagram or manually arrange the shapes using their Position property. 

Here is an example showing how to get the DraggingServce:

 var draggingService = diagram.ServiceLocator.GetService<IDragging>() as DraggingService; 

Note that in order for the layout to respect the new position of the dragged shape you may need to update its position also in the Shapes collection of the diagram.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Steve
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or