Check it out: Live Telerik UI for ASP.NET AJAX & all .NET Web Products Release Webinar on Tuesday 26 | 11 AM ET.
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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:
The diagram can be data bound on the client-side to a Kendo hierarchical data source via the Kendo UI Diagram widget.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.ClientSide.DefaultCS" %> <!DOCTYPE html> <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>