Enable autoscroll behavior in diagrams

[Joost]

Hi,

When making a large diagram it's nice to have the RadDiagram scroll along when you drag a shape or a connector.
I'm not really sure what the best approach is here though, I know how to implement it with a regular ScrollView but this is slightly different.

I found some information here: here and here regarding autoscrolling but when I apply it to a diagram like this:

<telerik:RadDiagram Grid.Column="1" Grid.Row="1" x:Name="diagram"
                            ScrollViewer.HorizontalScrollBarVisibility="Visible"
                            ScrollViewer.VerticalScrollBarVisibility="Visible"
                            RouteConnections="True"
                            ConnectionRoundedCorners="True"
                            telerik:ScrollingSettingsBehavior.IsEnabled="True"/>

The following error appears in VS:
Error Value cannot be null.
Parameter name: scrollingService

Can autoscroll be enabled for RadDiagrams? Or am I doing something wrong here.

 

[Martin Ivanov]

Hi Joost,

The ScrollingSettingsBehavior.IsEnabled attached property does not work with RadDiagram. This is why the described exception is thrown. RadDiagram doesn't support auto scrolling out of the box. To achieve such functionality you can create a custom diagram that derives from RadDiagram and implements the IScrollingServiceCore and IScrollingInfo interfaces. You can find an example for this approach in the OrgChart demo.

Regards,
Martin
Telerik

[Joost]

Hi Martin,

I tried the custom "OrgChartDiagram" class with autoscrolling and that's a step in the right direction.
Whenever I drag a new shape from the toolbox into the diagram it scrolls. Existing shapes in the diagram don't trigger the OnElementDragOver callback however, so no autoscrolling there. I suppose the diagram is performing an internal drag/drop.

I tried to fiddle around with the RadDiagram.Drag event, but that one is only triggered after the drag. The MouseDown event could work, even ​for when you're selecting a group of shapes in the diagram. But I've not yet figured out how to make the DragDropManager respond to this.

What would be the best approach to implement that part for both shapes and connectors?​

Best regards

[Martin Ivanov]

Hi Joost,

I will need additional time to check your case. I will contact you with more information in few hours.

Regards,
Martin
Telerik

[Martin Ivanov]

Hello Joost,

Indeed, the mentioned interfaces doesn't work when you drag shapes that are already plotted in the diagram. This is because the interfaces work with DragDropManager and its events. On the other hand the dragging in RadDiagram actually doesn't use any drag events but a DraggingService that moves the items on a canvas surface.

In this case you will need to write custom logic for the auto scrolling functionality. Basically, you can use the diagram's DraggingService and a DispatcherTimer. I prepared an example that demonstrates a possible approach for implementing this. However, this is merely a suggestion that is not finished and tested so I recommend you to use it only as a reference for your implementation. You can find the project attached in this reply.

Regards,
Martin
Telerik

[Joost]

Hi Martin,

Thanks for the example. I've combined your code together with the OrgChart demo code you mentioned earlier. Everything seems to work fine, I only need to solve some visual glitches when dragging a selection of items, but I can work that part out.

The only real feature I still want is autscrolling when drawing a connection from one shape to another. The IDraggingService doesn't seem to respond to those actions. I tried the IManipulationPointService, but the events there only start triggering after the connection is drawn and something is happening to that connection.

What service is available for that? Maybe I've overlooked it in the documentation.

Best regards

[Martin Ivanov]

Hi Joost,

Actually, the connections of the diagram are handled by the diagram tools which are exposed through the ToolService (which implements the IToolService interfrace). RadDiagram uses the ConnectionTool and the ConnectionManipulationTool to manipulate its connections. 

For your convenience I prepared a sample project with an approach similar for the one for the shape's dragging. Please give it a try and let me know if it helps.

Regards,
Martin
Telerik

[Joost]

Hi Martin,

That's a great demo. I've extended it with the RectangleSelectionTool so that selecting items also works with autoscroll.
Thanks for all your help and samples.

Best regards