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

SqlDataSource

US OPEN MEN'S SINGLES

BRACKETS

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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Diagram.DataBind.DefaultVB"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" />
    <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-wide">
        <h2>US OPEN MEN'S SINGLES</h2>
        <h3>BRACKETS</h3>
        <telerik:RadDiagram ID="brackets" runat="server" Width="800"
                            DataSourceId="ShapesDataSource"
                            ConnectionDataSourceId="ConnectionsDataSource"
                            OnItemDataBound="CustomizeShapeItem" EnableViewState="false">
            <ClientEvents OnLoad="diagram_load" />
            <BindingSettings>
                <ShapeSettings
                    DataFillColorField="Background"
                    DataContentTextField="Content"
                    DataIdField="ShapeId"
                    DataWidthField="Width"
                    DataHeightField="Height" />
                <ConnectionSettings
                    DataFromShapeIdField="FromShapeId"
                    DataToShapeIdField="ToShapeId" />
            </BindingSettings>
        </telerik:RadDiagram>

        <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" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance