diff --git a/components/diagram/overview.md b/components/diagram/overview.md index 35348dd49..1f81d98a6 100644 --- a/components/diagram/overview.md +++ b/components/diagram/overview.md @@ -228,6 +228,38 @@ The Diagram allows users to zoom the graph in and out for better perception. The MinZoom="0" /> ```` +## Pan + +The Diagram content may overflow the component boundaries if there are a lot of shapes or if the user zooms in. By default, the Diagram allows users to pan the content by holding the `Ctrl` key and dragging. The following code snippet shows the relevant parameters together with their default values. + +When both panning and [selection](#select) are enabled, make sure the two features use a different `Key`. + +>caption Pan-related Diagram parameters + +````RAZOR.skip-repl + + + +```` + +## Select + +Users can select a single shape or connection with a click. The Diagram also supports multiple selection through dragging a rectangular marquee. The following code snippet shows the relevant parameters together with their default values. + +Once the user selects some shapes and connections, they can drag them to another position or remove them with the `Del` key. + +When both [panning](#pan) and selection are enabled, make sure the two features use a different `Key`. + +>caption Selection-related Diagram parameters + +````RAZOR.skip-repl + + + + + +```` + ## Events The Telerik Diagram fires events that enable the app to detect and react to user interactions with the component. Find out more about the [Diagram events and event arguments](slug:diagram-events).