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




The diagram can use the standard data sources for data binding an ASP.NET control:

  • Declarative ASP.NET data sources (SqlDatasource, ObjectDataSource, LinqDataSource, etc.)
  • Server-side collections that implement the IEnumerable interface.

The shapes and the connections of Telerik ASP.NET diagram are data bound separately.

Similar to setting a data source for an ASP.NET control, you should either use the DataSourceID property when data binding shapes declaratively or DataSource when the data source of the shapes is set on the server-side.

The data binding of connections is achieved via the properties ConnectionDataSourceID and ConnectionDataSource.

The columns of the data source are attached to their corresponding data fields in the shapes and connections via the properties with the structure Data[field name]Field in RadDiagram > BindingSettings > ShapeSettings and RadDiagram > BindingSettings > ConnectionSettings.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.DataBind.DefaultCS" %>

<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" />
    <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" Width="800" Height="480"
                            OnItemDataBound="CustomizeShapeItem" EnableViewState="false">
            <ClientEvents OnLoad="diagram_load" />
                    DataHeightField="Height" />
                    DataToShapeIdField="ToShapeId" />

        <asp:SqlDataSource ID="ShapesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                           SelectCommand="SELECT * FROM DiagramShapes" />
        <asp:SqlDataSource ID="ConnectionsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                           SelectCommand="SELECT * FROM DiagramConnections" />

Support & Learning Resources

Find Assistance