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

Server-Side Programming



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>
<html xmlns=''>
<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