Data Binding in Windows Forms Diagram

27 Apr 20218 minutes to read

Populating the data

  • Diagram can be populated with the nodes and connectors based on the information provided from an external data source.
  • Diagram exposes its specific data-related properties, which allow you specify the data source fields from where the node information has to be retrieved.

To explore those properties, refer to the Data source settings.

XML data binding

Diagram can be populated based on the user defined XML data by mapping the relevant data source fields.
To map the user defined XML data with Diagram, you have to configure the DataSource fields. The following code example illustrates how to bind XML data with the Diagram.

  • XAML
  • <?xml version="1.0" encoding="UTF-8"?>
    <dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="Employees.xsd" generated="2005-01-18T15:03:23">
      <Employees EmployeeID="113001">
       <Name>Antone Burnett</Name>
        <Designation>Chief Executive Officer</Designation>
      </Employees>  
      
      <Employees EmployeeID="113002">
       <Name>Christina Berglund</Name>
        <Designation>Vice President of sales</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
      <Employees EmployeeID="113003">
       <Name>Thomas Hardy</Name>
        <Designation>Vice President of Engineering</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
      <Employees  EmployeeID="113004">
       <Name>Ana Trujillo</Name>
        <Designation>Vice President of Production</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
      <Employees  EmployeeID="113005">
       <Name>Antonio Moreno</Name>
        <Designation>Information Services Manager</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
      <Employees  EmployeeID="113006">
       <Name>Maria Anders</Name>
        <Designation>Chief Financial Officer</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
      <Employees  EmployeeID="113007">
       <Name>Van Der Wane</Name>
        <Designation>Marketing Manager</Designation>
        <ManagerID>113001</ManagerID>
      </Employees>
       <Employees  EmployeeID="113008">
       <Name>Alexis Patrick</Name>
        <Designation>Production Supervisor</Designation>
        <ManagerID>113003</ManagerID>
      </Employees>
        <Employees  EmployeeID="113009">
       <Name>Suzie Watts</Name>
        <Designation>Quality Assurance Manager</Designation>
        <ManagerID>113003</ManagerID>
      </Employees>  
      <Employees  EmployeeID="113010">
       <Name>Hanna Moos</Name>
        <Designation>Account Manager</Designation>
        <ManagerID>113006</ManagerID>
      </Employees>
     </dataroot>
    //Binds the XML(local data) with node
    Syncfusion.Windows.Forms.Diagram.Rectangle rect = new Syncfusion.Windows.Forms.Diagram.Rectangle(100, 100, 100, 40, MeasureUnits.Pixel); 
    rect.LineStyle.LineWidth = 0; 
    rect.FillStyle.Color = Color.DarkCyan; 
    // Default Label  
    Syncfusion.Windows.Forms.Diagram.Label label = new Syncfusion.Windows.Forms.Diagram.Label(); 
    label.FontStyle.Family = "Segoe UI"; 
    label.FontStyle.Size = 9; 
    label.FontStyle.Bold = true; 
    label.FontColorStyle.Color = Color.White; 
    label.UpdatePosition = true; 
    rect.Labels.Add(label); 
    //Initializing Data Binding properties 
    diagram1.Binding.DefaultNode = rect; 
    diagram1.Binding.Label.Add("Name"); 
    diagram1.Binding.ParentId = "ManagerID"; 
    diagram1.Binding.Id = "EmployeeID";
    diagram1.Binding.DataSource = diagram1.GetDataSourceFromXML("..\\..\\XML Binding1.xml");
    'Binds the XML(local data) with node
    Dim rect As New Syncfusion.Windows.Forms.Diagram.Rectangle(100, 100, 100, 40, MeasureUnits.Pixel)
    rect.LineStyle.LineWidth = 0
    rect.FillStyle.Color = Color.DarkCyan
    ' Default Label 
    Dim label As New Syncfusion.Windows.Forms.Diagram.Label()
    label.FontStyle.Family = "Segoe UI"
    label.FontStyle.Size = 9
    label.FontStyle.Bold = True
    label.FontColorStyle.Color = Color.White
    label.UpdatePosition = True
    rect.Labels.Add(label)
    'Initializing Data Binding properties
    diagram1.Binding.DefaultNode = rect
    diagram1.Binding.Label.Add("Name")
    diagram1.Binding.ParentId = "ManagerID"
    diagram1.Binding.Id = "EmployeeID"
    diagram1.Binding.DataSource = diagram1.GetDataSourceFromXML("..\..\XML Binding1.xml")

    Sample diagram is as follows.

    Diagram XML Data-Binding

    DataBase Binding

    You can bind the Diagram with DataBase data by using SqlConnection.
    The following code illustrates how to bind the data to the Diagram.

    Syncfusion.Windows.Forms.Diagram.Rectangle rect = new Syncfusion.Windows.Forms.Diagram.Rectangle(100, 100, 100, 40, MeasureUnits.Pixel);
    rect.LineStyle.LineWidth = 0;
    rect.FillStyle.Color = Color.DarkCyan;
    // Default Label 
    Syncfusion.Windows.Forms.Diagram.Label label = new Syncfusion.Windows.Forms.Diagram.Label();
    label.FontStyle.Family = "Segoe UI";
    label.FontStyle.Size = 10;
    label.FontStyle.Bold = true;
    label.FontColorStyle.Color = Color.White;
    label.UpdatePosition = true;
    rect.Labels.Add(label);
    //Initializing Data Binding properties            
    diagram1.Binding.DefaultNode = rect;
    diagram1.Binding.Id = "Id";
    diagram1.Binding.ParentId = "ParentId";
    DataTable table = new DataTable("alldata");
    string command = "SELECT * FROM databind ";
    diagramDataSetTableAdapters.databindTableAdapter cbn = new diagramDataSetTableAdapters.databindTableAdapter();
    using (SqlConnection conn = new SqlConnection(cbn.Connection.ConnectionString))
    {
      using (SqlCommand cmd = new SqlCommand(command, conn))
      {
        SqlDataAdapter adapt = new SqlDataAdapter(cmd);
        conn.Open();
        adapt.Fill(table);
        //Passing the table data to DataSource
        diagram1.Binding.DataSource = table;
        conn.Close();
      }
    }
    Dim rect As New Syncfusion.Windows.Forms.Diagram.Rectangle(100, 100, 100, 40, MeasureUnits.Pixel)
    rect.LineStyle.LineWidth = 0
    rect.FillStyle.Color = Color.DarkCyan
    ' Default Label 
    Dim label As New Syncfusion.Windows.Forms.Diagram.Label()
    label.FontStyle.Family = "Segoe UI"
    label.FontStyle.Size = 10
    label.FontStyle.Bold = True
    label.FontColorStyle.Color = Color.White
    label.UpdatePosition = True
    rect.Labels.Add(label)
    'Initializing Data Binding properties
    diagram1.Binding.DefaultNode = rect
    diagram1.Binding.Id = "Id"
    diagram1.Binding.ParentId = "ParentId"
    Dim table As New DataTable("alldata")
    Dim cbn As New diagramDataSetTableAdapters.databindTableAdapter()
    Dim command As String = "SELECT * FROM databind "
    Using conn As New SqlConnection(cbn.Connection.ConnectionString)
    Using cmd As New SqlCommand(command, conn)
    Dim adapt As New SqlDataAdapter(cmd)
    conn.Open()
    adapt.Fill(table)
    'Passing the table data to DataSource
    diagram1.Binding.DataSource = table
    conn.Close()
    End Using
    End Using

    Sample diagram is as follows.

    Diagram DB Data-Binding