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

Customize Diagram Elements

  • Select Elements To Edit

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