New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

End User Interaction

Generic Team Structure

New Employees

Sales
Web Designer
Developer
Drag to Organize

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>
<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" 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