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

WebForms Diagram Overview

How to solve a problem
Block diagram

In this demo the RadDiagram control is used to create a block diagram of a problem solving process. You can see all the major features of this interactive ASP.NET AJAX Diagramming control in this demo: the default shape types, custom shape types, creating connections between the shapes and rich end-user shape interactions, like selection, resizing, rotating and dragging.

About RadDiagram for ASP.NET AJAX

The Telerik ASP.NET Diagram helps you create rich and interactive diagrams with ease. Powered by HTML5, the control offers excellent client-side responsiveness and user experience. Telerik ASP.NET Diagramming Component comes with multitude of predefined layouts and rich built-in functionality, including drag and drop support, connection editing, shape rotation and resizing and more.

RadDiagram and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Built-in essential shapes
  • Predefined layouts
  • Client-side and server-side databinding options
  • Rich end-user shape interactions, such as resizing, rotating moving, aligning and more
  • Support for Cut, Copy, Paste, Delete, Undo, Redo
  • Drag and drop support
  • Zoom and pan
  • Export and import of JSON data
  • Bring to front and bring to back functionality
  • Easy-to-customize elements and shape templates
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Title="" Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Diagram.Overview.DefaultVB"  %>

<!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 no-bg">
        <telerik:RadDiagram ID="theDiagram" runat="server" Width="1200" Height="700" Skin="Metro">
            <ClientEvents OnLoad="diagram_load" />
            <ShapeDefaultsSettings Visual="visualizeShape">
                <StrokeSettings Color="#fff" />
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="start" Type="start" X="30" Y="70">
                    <FillSettings Color="#cf3737" />
                    <ContentSettings Text="I have\na problem" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q1" Type="question" X="170" Y="50" Width="140" Height="140">
                    <FillSettings Color="#ffbe33" />
                    <ContentSettings Text="Can I solve it\nalone" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q1Yes" Type="text" X="260" Y="40">
                    <ContentSettings Text="Yes" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q1No" Type="text" X="330" Y="100">
                    <ContentSettings Text="No" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q2" Type="question" Width="140" Height="140" X="350" Y="50">
                    <FillSettings Color="#ffbe33" />
                    <ContentSettings Text="I found\na solution in\nthe forums" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q2Yes" Type="text" X="440" Y="40">
                    <ContentSettings Text="Yes" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q2No" Type="text" X="510" Y="100">
                    <ContentSettings Text="No" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q3" Type="question" Width="140" Height="140" X="530" Y="50">
                    <FillSettings Color="#ffbe33" />
                    <ContentSettings Text="The latest\nproduct version\nsolves the\nproblem" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q3Yes" Type="text" X="620" Y="40">
                    <ContentSettings Text="Yes" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q3No" Type="text" X="690" Y="100">
                    <ContentSettings Text="No" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q4" Type="question" Width="140" Height="140" X="710" Y="50">
                    <FillSettings Color="#ffbe33" />
                    <ContentSettings Text="The problem\nis reproducible\nin the QSF" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q4Yes" Type="text" X="800" Y="208">
                    <ContentSettings Text="Yes" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q4No" Type="text" X="870" Y="100">
                    <ContentSettings Text="No" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="action1" Type="rectangle" X="730" Y="230">
                    <ContentSettings Text="Open a\nsupport ticket\nand send the\ndemo link" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="action2" Type="rectangle" X="890" Y="70">
                    <ContentSettings Text="Prepare\na sample\nproject" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="action3" Type="rectangle" X="890" Y="230">
                    <ContentSettings Text="Open a\nsupport ticket\nand send your\nproject" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="action4" Type="rectangle" X="810" Y="390">
                    <ContentSettings Text="Describe\ndetails" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="action5" Type="rectangle" X="810" Y="530">
                    <ContentSettings Text="Submit the\nticket" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q5" Type="question" Width="140" Height="140" X="1030" Y="440">
                    <FillSettings Color="#ffbe33" />
                    <ContentSettings Text="The support\nofficer's response\nwas helpful" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q5Yes" Type="text" X="1120" Y="300">
                    <ContentSettings Text="Yes" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="q5No" Type="text" X="1000" Y="450">
                    <ContentSettings Text="No" />
                    <StrokeSettings Color="#000" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="end" Type="end" X="1050" Y="70">
                    <FillSettings Color="#49a046" />
                    <ContentSettings Text="Problem\nsolved" />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="start" />
                    <ToSettings ShapeId="q1" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q1" Connector="Right" />
                    <ToSettings ShapeId="q2" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q1" Connector="Top" />
                    <ToSettings ShapeId="end" Connector="Top" />
                    <PointsCollection>
                        <telerik:DiagramConnectionPoint X="240" Y="20" />
                        <telerik:DiagramConnectionPoint X="1100" Y="20" />
                    </PointsCollection>
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q2" Connector="Right" />
                    <ToSettings ShapeId="q3" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q2" Connector="Top" />
                    <ToSettings ShapeId="end" Connector="Top" />
                    <PointsCollection>
                        <telerik:DiagramConnectionPoint X="420" Y="20" />
                        <telerik:DiagramConnectionPoint X="1100" Y="20" />
                    </PointsCollection>
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q3" Connector="Right" />
                    <ToSettings ShapeId="q4" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q3" Connector="Top" />
                    <ToSettings ShapeId="end" Connector="Top" />
                    <PointsCollection>
                        <telerik:DiagramConnectionPoint X="600" Y="20" />
                        <telerik:DiagramConnectionPoint X="1100" Y="20" />
                    </PointsCollection>
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q4" />
                    <ToSettings ShapeId="action1" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q4" Connector="Right"/>
                    <ToSettings ShapeId="action2" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="action2" />
                    <ToSettings ShapeId="action3" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="action1" />
                    <ToSettings ShapeId="action4" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="action3" />
                    <ToSettings ShapeId="action4" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="action4" />
                    <ToSettings ShapeId="action5" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="action5" />
                    <ToSettings ShapeId="q5" Connector="Bottom" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q5" Connector="Top" />
                    <ToSettings ShapeId="action4" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="q5" />
                    <ToSettings ShapeId="end" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
        <div id="diagram-title-container">
            <div id="diagram-title">How to solve a problem</div>
            <div id="diagram-subtitle">Block diagram</div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance