Diagram - Customize Diagram Elements

Select Elements To Edit

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Apart from defining appearance to the diagram’s elements from the corresponding server-side properties, the rich client-side API of the underlying Kendo UI HTML5 Diagram widget offers the ability to dynamically modify these configurations.

This demo demonstates how to use the client-side API of the diagram control and more precisely the redraw(options) method of Diagram items, where options defines the changes that you want to apply to the specified shape or connection.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.CustomizingElements.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>
</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-medium">
        <telerik:RadDiagram ID="theDiagram" runat="server" Width="600px" Height="430px">
            <ClientEvents OnLoad="diagram_load" OnChange="diagram_change" />
            <ShapeDefaultsSettings Type="circle">
                <ConnectorsCollection>
                    <telerik:DiagramShapeConnector Name="top" />
                    <telerik:DiagramShapeConnector Name="left" />
                    <telerik:DiagramShapeConnector Name="bottom" />
                    <telerik:DiagramShapeConnector Name="Right" />
                    <telerik:DiagramShapeConnector Name="Auto" />
                    <telerik:DiagramShapeConnector Name="circleTopLeft" Position="circleTopLeft" />
                    <telerik:DiagramShapeConnector Name="circleTopRight" Position="circleTopRight" />
                    <telerik:DiagramShapeConnector Name="circleBottomLeft" Position="circleBottomLeft" />
                    <telerik:DiagramShapeConnector Name="circleBottomRight" Position="circleBottomRight" />
                </ConnectorsCollection>
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="shape1" X="300" Y="20" Width="70" Height="70">
                    <FillSettings Color="#7f3f98" />
                    <ContentSettings Text="Anna" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape2" X="400" Y="40" Width="120" Height="120">
                    <FillSettings Color="#2b68bb" />
                    <ContentSettings Text="Rene" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape3" X="500" Y="170" Width="80" Height="80">
                    <FillSettings Color="#a1cd3a" />
                    <ContentSettings Text="Philip" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape4" X="370" Y="260" Width="100" Height="100">
                    <FillSettings Color="#7f3f98" />
                    <ContentSettings Text="George" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape5" X="210" Y="300" Width="110" Height="110">
                    <FillSettings Color="#2b68bb" />
                    <ContentSettings Text="Anabela" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape6" X="60" Y="240" Width="90" Height="90">
                    <FillSettings Color="#a1cd3a" />
                    <ContentSettings Text="Maria" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape7" X="40" Y="120" Width="100" Height="100">
                    <FillSettings Color="#7f3f98" />
                    <ContentSettings Text="Jose" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape8" X="150" Y="40" Width="80" Height="80">
                    <FillSettings Color="#2b68bb" />
                    <ContentSettings Text="Daniel" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="shape9" X="250" Y="150" Width="100" Height="100">
                    <FillSettings Color="#4cc5da" />
                    <ContentSettings Text="Simon" Color="#fff" />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape1" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape2" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape3" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape4" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape5" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape6" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape7" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="shape8" />
                    <ToSettings ShapeId="shape9" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
    </div>
    <qsf:ConfiguratorPanel ID="configurator" runat="server" Expanded="true" Title="Select Elements To Edit">
        <Views>
            <qsf:View runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                            <qsf:ColorPicker Label="Fill" ID="fillColor" OnClientLoad="fillColor_load" CssClass="fb-sized" runat="server" />
                            <qsf:ColorPicker Label="Text Color" ID="contentColor" OnClientLoad="contentColor_load" CssClass="fb-sized" runat="server" />
                        </qsf:ConfiguratorColumn>
                        <qsf:ConfiguratorColumn runat="server">
                            <qsf:ColorPicker Label="Stroke Color" ID="strokeColor" OnClientLoad="strokeColor_load" CssClass="fb-sized" runat="server" />
                            <div class="fb-sized">
                                <qsf:NumericTextBox ID="strokeWidth" Label="Stroke Width (px)" Size="Narrow" runat="server">
                                    <ClientEvents OnLoad="strokeWidth_load" />
                                </qsf:NumericTextBox>
                            </div>
                        </qsf:ConfiguratorColumn>
                    </li>
                    <li>
                        <qsf:Button runat="server" AutoPostBack="false" Text="Apply" Size="Medium" OnClientClicked="applyChanges"></qsf:Button>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?