Generating Diagrams from a Data Source

• Feb 20, 2020
• 3 minutes to read

The DiagramDataBindingController class provides the data binding functionality for the DiagramControl. To bind the DiagramControl to data, open its Smart Tag panel and select Add DataBindingController.

Note

Starting with v20.1, the DiagramDataBindingController supports DataTable and DataSet sources.

To configure the data source, go to the diagramDataBindingController‘s Smart Tag.

The following table lists the properties used to map a diagram to data.

Member	Description
DiagramDataBindingController.DataSource (via DiagramDataBindingControllerBase.DataSource)	Specifies the path to a collection of diagram items.
DiagramDataBindingController.ConnectorsSource	Specifies the path to a collection of objects that represent connectors.
DiagramDataBindingController.ConnectorFromMember	Specifies the name of the data field that identifies the item to use as a connector’s start item.
DiagramDataBindingController.ConnectorToMember	Specifies the name of the data field that identifies the item to use as a connector’s end item.

Tip

The Item Template Designer allows you to design templates for diagram items and connectors at design time.

The following example demonstrates the DiagramControl bound to sample data.

C#

public class ViewModel {
    public List<Item> Items { get; set; }
    public List<Link> Connections { get; set; }
    public ViewModel() {
        Items = new List<Item>();
        for (int i = 0; i < 5; i++)
            Items.Add(new Item { Id = i, Name = "Item " + i });
        Connections = new List<Link>();
        for (int i = 0; i < 4; i++)
            Connections.Add(new Link { From = Items[i].Id, To = Items[i + 1].Id });
        Connections.Add(new Link { From = Items[4].Id, To = Items[0].Id });
    }
}
public class Item {
    public int Id { get; set; }
    public string Name { get; set; }
}

public class Link {
    public object From { get; set; }
    public object To { get; set; }
}

VB.NET

 Public Class ViewModel
    Public Property Items() As List(Of Item)
    Public Property Connections() As List(Of Link)
    Public Sub New()
        Items = New List(Of Item)()
        For i As Integer = 0 To 4
            Items.Add(New Item With {
                .Id = i,
                .Name = "Item " & i
            })
        Next i
        Connections = New List(Of Link)()
        For i As Integer = 0 To 3
            Connections.Add(New Link With {
                .From = Items(i).Id,
                .To = Items(i + 1).Id
            })
        Next i
        Connections.Add(New Link With {
            .From = Items(4).Id,
            .To = Items(0).Id
        })
    End Sub
End Class
Public Class Item
    Public Property Id() As Integer
    Public Property Name() As String
End Class

Public Class Link
    Public Property From() As Object
    Public Property [To]() As Object
End Class

C#

 public Form1() {
    InitializeComponent();
    ViewModel viewModel = new ViewModel();
    diagramDataBindingController1.GenerateItem += DiagramDataBindingController1_GenerateItem;
    diagramDataBindingController1.DataSource = viewModel.Items;
    diagramDataBindingController1.KeyMember = "Id";
    diagramDataBindingController1.ConnectorsSource = viewModel.Connections;
    diagramDataBindingController1.ConnectorFromMember = "From";
    diagramDataBindingController1.ConnectorToMember = "To";
    diagramDataBindingController1.LayoutKind = DiagramLayoutKind.Circular;
}
private void DiagramDataBindingController1_GenerateItem(object sender, DiagramGenerateItemEventArgs e) {
    var item = new DiagramShape {
        X = 27,
        Width = 75,
        Height = 50,
        Shape = BasicShapes.Rectangle
    };
    item.Bindings.Add(new DiagramBinding("Content", "Name"));
    e.Item = item;
}

VB.NET

Public Sub New()
    InitializeComponent()
    Dim viewModel As New ViewModel()
    AddHandler diagramDataBindingController1.GenerateItem, AddressOf DiagramDataBindingController1_GenerateItem
    diagramDataBindingController1.DataSource = viewModel.Items
    diagramDataBindingController1.KeyMember = "Id"
    diagramDataBindingController1.ConnectorsSource = viewModel.Connections
    diagramDataBindingController1.ConnectorFromMember = "From"
    diagramDataBindingController1.ConnectorToMember = "To"
    diagramDataBindingController1.LayoutKind = DiagramLayoutKind.Circular
End Sub
Private Sub DiagramDataBindingController1_GenerateItem(ByVal sender As Object, ByVal e As DiagramGenerateItemEventArgs)
    Dim item = New DiagramShape With {
        .X = 27,
        .Width = 75,
        .Height = 50,
        .Shape = BasicShapes.Rectangle
    }
    item.Bindings.Add(New DiagramBinding("Content", "Name"))
    e.Item = item
End Sub