Web20 skin

Diagram - Server-Side Programming



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

Setting up the RadDiagram control on the server-side through the code-behind is as straight-forward as can be expected. This approach is more dynamic than the descriptive declaration of the control and should be preferred when shapes and connections will be changed frequently.

In the provided demo the whole ASP.NET AJAX diagram is created in the code-behind. First some basic properties of the diagram are set, i.e. Width and Height. Then the common settings for the diagram shapes are specified in the ShapeDefaultsSettings composite property.

Shapes are created and added to the ShapesCollection. Finally connections are defined and again added to the ConnectionsCollection.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.ServerSide.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>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>US OPEN MEN'S SINGLES</h2>
        <telerik:RadDiagram ID="brackets" runat="server" EnableViewState="false">
            <ClientEvents OnLoad="diagram_load" />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?