Diagram - End User Interaction

Generic Team Structure

New Employees

Sales
Web Designer
Developer
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadDiagram control lets you interact with the elements of the diagram in many different ways. You can find all of the available actions in the following list.

  • Resize - Click on a shape and resize it via the provided handles .
  • Translate - Click on a shape, drag it to the desired location and drop it to complete the operation.
  • Pan (Ctrl + drag)
  • Zoom - You can change the zoom level of the whole diagram via the mouse wheel.
  • Undo(Ctrl+Z) and Redo(Ctrl+Y)
  • Selection - You can select multiple shapes and connections by clicking on an area in the diagram outside of a shape or a connection, holding down the left mouse button and dragging.
  • Connecting Shapes - To connect shapes left-click on a shape connector and then drag the end cap of the created connection line to a connector of another shape.
  • Cut/Copy/Paste of Diagram elements
  • Deleting Shapes and Connections - Select a shape or a connection and press the Delete key of your keyboard.

These actions are enabled by default and you can perform them either on a shape or a group of shapes.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.Interactions.DefaultCS"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>Generic Team Structure</h2>
        <div id="toolbox">
            <h4>New Employees</h4>
            <telerik:RadListView ID="ShapesList" runat="server">
                <ItemTemplate>
                    <div class="item" data-data='{"id":"<%# DataBinder.Eval(Container.DataItem, "ID") %>","content":{"text": "<%# DataBinder.Eval(Container.DataItem, "Text") %>", "color": "#fff"}, "fill": {"color": "<%# DataBinder.Eval(Container.DataItem, "Background") %>"}}'>
                        <svg width="120" height="110">
                            <g transform="scale(1,1)">
                                <path stroke="gray" stroke-dasharray="" stroke-width="0" fill="<%# DataBinder.Eval(Container.DataItem, "Background") %>" d="m30,0 L90,0 L120,52 L90,104 L30,104 L0,52 z"/>
                                <text stroke="none" x="60" y="52" fill="#fff" text-anchor="middle" font-variant="normal" font-size="15" font-weight="normal" dominant-baseline="central"><%# DataBinder.Eval(Container.DataItem, "Text") %></text>
                            </g>
                        </svg>
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
            <div class="footer">Drag to Organize</div>
        </div>
        <div id="button-container">
            <telerik:RadButton RenderMode="Lightweight" ID="layoutBtn" ToolTip="Layout the Diagram in a visually appealing tree structure" Text="Arrange Diagram" OnClientClicked="layoutBtn_click" Width="150" AutoPostBack="false" runat="server"></telerik:RadButton>
        </div>
        <telerik:RadDiagram ID="theDiagram" runat="server" Width="800" Height="570">
            <LayoutSettings Enabled="true" Type="Tree" Subtype="Down">
                <GridSettings OffsetY="45" />
            </LayoutSettings>
            <ClientEvents OnLoad="diagram_load" OnChange="diagram_change" />
            <ShapeDefaultsSettings Path="m30,0 L90,0 L120,52 L90,104 L30,104 L0,52 z" Width="120" Height="104">
                <ConnectorsCollection>
                    <telerik:DiagramShapeConnector Name="top" />
                    <telerik:DiagramShapeConnector Name="bottom" />
                    <telerik:DiagramShapeConnector Name="deg60" Position="getPositionMethod(60)" />
                    <telerik:DiagramShapeConnector Name="deg120" Position="getPositionMethod(120)" />
                    <telerik:DiagramShapeConnector Name="deg180" Position="getPositionMethod(180)" />
                    <telerik:DiagramShapeConnector Name="deg240" Position="getPositionMethod(240)" />
                    <telerik:DiagramShapeConnector Name="deg300" Position="getPositionMethod(300)" />
                    <telerik:DiagramShapeConnector Name="deg360" Position="getPositionMethod(360)" />
                    <telerik:DiagramShapeConnector Name="Auto" />
                </ConnectorsCollection>
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="management">
                    <FillSettings Color="#8db310" />
                    <ContentSettings Text="Management" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="teamlead1">
                    <FillSettings Color="#f28200" />
                    <ContentSettings Text="Team Lead" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="teamlead2">
                    <FillSettings Color="#f28200" />
                    <ContentSettings Text="Team Lead" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="creative">
                    <FillSettings Color="#fac53b" />
                    <ContentSettings Text="Creative" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="developer">
                    <FillSettings Color="#fac53b" />
                    <ContentSettings Text="Developer" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="marketing">
                    <FillSettings Color="#fac53b" />
                    <ContentSettings Text="Marketing" Color="#fff" />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="management" />
                    <ToSettings ShapeId="teamlead1" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="management" />
                    <ToSettings ShapeId="teamlead2" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="teamlead1" />
                    <ToSettings ShapeId="creative" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="teamlead1" />
                    <ToSettings ShapeId="developer" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="teamlead2" />
                    <ToSettings ShapeId="marketing" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?