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

Integration with RadDiagram

Generic Team Structure

You can data bind RadDiagram shapes and connections on the client to RadClientDataSource controls since Q1 2015.

Client-side data binding allows for:

  • data updates without postbacks
  • easy integration with various data services
  • flexible client-side development.

The client-side data binding is provided through the following properties:

  • ClientDataSourceID - the server ID of the RadClientDataSource responsible for providing the Shapes data.
  • ConnectionsClientDataSourceID - the server ID of the RadClientDataSource responsible for providing the Connections data.

The shapes and connections data should be in a JSON format with the necessary fields:

  • for Shapes, you need fields with the exact names from The fields of the shape model article. These fields control the type, position and dimensions of the shapes.
  • for Connections, you need fields with the exact names from The fields of the connection model article. These fields associate connections with the shapes.

Note: If you want to customize the shapes yourself, you can get the necessary data from the dataItem object and reconfigure the shapes in either of the following ways:

  • DefaultVB.aspx
  • scripts.js
<%@ Page Title="" Language="VB"  AutoEventWireup="true" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadClientDataSource ID="ShapesDataSource" runat="server">
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select Url="JSON/shapes-data.json" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>
    <telerik:RadClientDataSource ID="ConnectionsDataSource" runat="server">
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select Url="JSON/connections-data.json" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <Schema>
            <Model>
                <telerik:ClientDataSourceModelField FieldName="from" OriginalFieldName="from.shapeId" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="to" OriginalFieldName="to.shapeId" DataType="String" />
            </Model>
        </Schema>
    </telerik:RadClientDataSource>
    <div class="demo-container size-wide">
        <h4>Generic Team Structure</h4>
        <telerik:RadDiagram ID="RadDiagram1" runat="server" Width="800px" Height="530px" ClientDataSourceID="ShapesDataSource" ConnectionsClientDataSourceID="ConnectionsDataSource">
            <ClientEvents OnChange="OnChange" />
            <ShapeDefaultsSettings>
                <ContentSettings Template="#=dataItem.content.text#" FontSize="16" />
            </ShapeDefaultsSettings>
        </telerik:RadDiagram>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance