Diagram - Client-Side Programming

Demo Configurator

  • Connect Shapes
  • Edit Selected Shape
  • FromSelect
  • ToSelect
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadDiagram is an ASP.NET WebForms wrapper for the Kendo UI HTML5 Diagram and it exposes the rich API of the widget Client-Side – its methods and events.

The Kendo UI widget is exposed through the get_kendoWidget mthod of the RadDiagram’s client-side object, e.g.:

var diagramWidget = $find("<%= theDiagram.ClientID %>").get_kendoWidget();

Also, RadDiagram offers server-side properties for assigning handlers to the events:

Server-Side Properties:

  • OnLoad - defines handler for the Load event
  • OnSelect - defines handler for the Select event
  • OnClick - defines handler for the Click event
  • OnMouseEnter - defines handler for the MouseEnter event
  • OnMouseLeave - defines handler for the MouseLeave event
  • OnPan - defines handler for the Pan event
  • OnItemBoundsChange - defines handler for the ItemBoundsChange event
  • OnChange - defines handler for the Change event
  • OnItemRotate - defines handler for the ItemRotate event
  • OnZoomStart - defines handler for the ZoomStart event
  • OnZoomEnd - defines handler for the ZoomEnd event

The diagram can be data bound on the client-side to a Kendo hierarchical data source via the Kendo UI Diagram widget.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.ClientSide.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>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</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-narrow">
        <telerik:RadDiagram ID="theDiagram" runat="server" Width="500" Height="500">
            <ClientEvents OnSelect="diagramSelect" OnItemBoundsChange="diagramItemBoundsChange" OnLoad="diagram_load" />
            <ShapesCollection>
                <telerik:DiagramShape Id="EagleShape" Type="circle">
                    <FillSettings Color="#fca651" />
                    <ContentSettings Text="Eagle" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="ZebraShape" Type="circle">
                    <FillSettings Color="#e26c60" />
                    <ContentSettings Text="Zebra" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="ButterflyShape" Type="circle">
                    <FillSettings Color="#a84186" />
                    <ContentSettings Text="Butterfly" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="PeacockShape" Type="circle">
                    <FillSettings Color="#fca651" />
                    <ContentSettings Text="Peacock" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="ElephantShape" Type="circle">
                    <FillSettings Color="#e26c60" />
                    <ContentSettings Text="Elephant" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="SpiderShape" Type="circle">
                    <FillSettings Color="#a84186" />
                    <ContentSettings Text="Spider" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="KangarooShape" Type="circle">
                    <FillSettings Color="#fca651" />
                    <ContentSettings Text="Kangaroo" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="OwlShape" Type="circle">
                    <FillSettings Color="#e26c60" />
                    <ContentSettings Text="Owl" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="BeeShape" Type="circle">
                    <FillSettings Color="#a84186" />
                    <ContentSettings Text="Bee" Color="#fff" />
                </telerik:DiagramShape>
            </ShapesCollection>
        </telerik:RadDiagram>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server" Title="Connect Shapes">
                <ul class="fb-group">
                    <li>
                        <qsf:DropDownList ID="fromCombo" Label="From" DefaultMessage="Select" OnClientSelectedIndexChanged="clearSelection" OnClientLoad="from_load" runat="server">
                            <Items>
                                <telerik:DropDownListItem Value="" Text="Clear Selection" />
                                <telerik:DropDownListItem Value="EagleShape" Text="Eagle" />
                                <telerik:DropDownListItem Value="ZebraShape" Text="Zebra" />
                                <telerik:DropDownListItem Value="ButterflyShape" Text="Butterfly" />
                                <telerik:DropDownListItem Value="PeacockShape" Text="Peacock" />
                                <telerik:DropDownListItem Value="ElephantShape" Text="Elephant" />
                                <telerik:DropDownListItem Value="SpiderShape" Text="Spider" />
                                <telerik:DropDownListItem Value="KangarooShape" Text="Kangaroo" />
                                <telerik:DropDownListItem Value="OwlShape" Text="Owl" />
                                <telerik:DropDownListItem Value="BeeShape" Text="Bee" />
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <qsf:DropDownList ID="toCombo" Label="To" DefaultMessage="Select" OnClientSelectedIndexChanged="clearSelection" OnClientLoad="to_load" runat="server">
                            <Items>
                                <telerik:DropDownListItem Value="" Text="Clear Selection" />
                                <telerik:DropDownListItem Value="EagleShape" Text="Eagle" />
                                <telerik:DropDownListItem Value="ZebraShape" Text="Zebra" />
                                <telerik:DropDownListItem Value="ButterflyShape" Text="Butterfly" />
                                <telerik:DropDownListItem Value="PeacockShape" Text="Peacock" />
                                <telerik:DropDownListItem Value="ElephantShape" Text="Elephant" />
                                <telerik:DropDownListItem Value="SpiderShape" Text="Spider" />
                                <telerik:DropDownListItem Value="KangarooShape" Text="Kangaroo" />
                                <telerik:DropDownListItem Value="OwlShape" Text="Owl" />
                                <telerik:DropDownListItem Value="BeeShape" Text="Bee" />
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <qsf:Button ID="connectBtn" Text="Connect" AutoPostBack="false" Size="Medium" OnClientClicked="connectShapes" runat="server" />
                        <qsf:Button ID="clearConnBtn" Text="Clear" AutoPostBack="false" Size="Medium" OnClientClicked="clearConnections" runat="server" />
                    </li>
                </ul>
            </qsf:View>
            <qsf:View runat="server" Title="Edit Selected Shape">
                <ul class="fb-group">
                    <li>
                        <qsf:ConfiguratorColumn Title="Position" Size="Auto" runat="server">
                                    <qsf:NumericTextBox ID="posXTextBox" Label="X" Size="Medium" runat="server">
                                        <ClientEvents OnLoad="x_load" />
                                    </qsf:NumericTextBox>
                                    <qsf:NumericTextBox ID="posYTextBox" Label="Y" Size="Medium" runat="server">
                                        <ClientEvents OnLoad="y_load" />
                                    </qsf:NumericTextBox>
                            <ul class="fb-group">
                            </ul>
                        </qsf:ConfiguratorColumn>
                    </li>
                    <li>
                        <qsf:ConfiguratorColumn Title="Size" Size="Auto" runat="server">
                                    <qsf:NumericTextBox ID="widthTextBox" Size="Medium" Label="Width" runat="server">
                                        <ClientEvents OnLoad="width_load" />
                                    </qsf:NumericTextBox>
                                    <qsf:NumericTextBox ID="heightTextBox" Size="Medium" Label="Height" runat="server">
                                        <ClientEvents OnLoad="height_load" />
                                    </qsf:NumericTextBox>
                        </qsf:ConfiguratorColumn>
                    </li>
                    <li>
                        <qsf:Button ID="updateBtn" Text="Apply" AutoPostBack="false" OnClientClicked="updateShape" Size="Medium" runat="server" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?