How to pan with the mouse only

HOW TO

Pan the RadDiagram canvas by clicking and dragging with the mouse only without using the keyboard.

DESCRIPTION

By default, to pan RadDiagram, you must also hold down the Ctrl key.

SOLUTION

To let the user pan immediately, set the Pannable.Keysetting to None.

It is important to note that panning and selecting are effectively the same gesture - dragging with the mouse or a finger/stylus. This is the reason why a key modifier is required, without it the diagram cannot know the user intent because the action is ambiguous.

This means that the Pannable.Key and Selectable.Key must be different.

On mobile devices where a keyboard is not available the diagram cannot tell the gestures apart and so it pans on dragging and selects on tap upon an element (like a shape) automatically.

Here is an example:

<telerik:RadDiagram runat="server" ID="RadDiagram1">
    <PannableSettings Key="None" />
    <ShapesCollection>
        <telerik:DiagramShape Id="DiagramShape1" Width="100" Height="70" X="260" Y="100" Type="rectangle">
            <ContentSettings Text="Parent" />
            <FillSettings Color="#25a0da" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="DiagramShape2" Height="70" X="60" Y="250" Type="circle">
            <ContentSettings Text="Child 1" />
            <FillSettings Color="#FFBE33" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="DiagramShape3" Height="70" X="245" Y="250" Type="circle">
            <ContentSettings Text="Child 2" />
            <FillSettings Color="#FFBE33" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="DiagramShape4" Height="70" X="440" Y="250" Type="circle">
            <ContentSettings Text="Child 3" />
            <FillSettings Color="#FFBE33" />
        </telerik:DiagramShape>
    </ShapesCollection>
    <ConnectionsCollection>
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
            <ToSettings Connector="Top" ShapeId="DiagramShape2" />
        </telerik:DiagramConnection>
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
            <ToSettings Connector="Top" ShapeId="DiagramShape3" />
        </telerik:DiagramConnection>
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
            <ToSettings Connector="Top" ShapeId="DiagramShape4" />
        </telerik:DiagramConnection>
    </ConnectionsCollection>
</telerik:RadDiagram>