Data Binding
The Telerik UI Diagram for ASP.NET MVC provides built-in DataSource options that allow you to bind the Diagram to remote data. You can bind to hierarchical data structures or use separate data sources for shapes and connections.
The following table summarizes the available binding approaches and their use cases:
| Binding Approach | Description | When to Use | Data Source Configuration |
|---|---|---|---|
Hierarchical Data Binding | Binds to a single data source with parent-child relationships defined by a children field | For tree-like structures such as organizational charts, mind maps, or any hierarchical data where relationships are nested | Use .DataSource() with .Model(m => m.Children("fieldName")) |
ShapeDataSource + ConnectionsDataSource | Uses separate data sources for shapes and connections, allowing independent CRUD operations | When shapes and connections need to be managed separately, or when you need full CRUD capabilities for both elements | Use .DataSource(ds => ds.ShapeDataSource()...) for shapes and .ConnectionsDataSource() for connections |
Binding to Hierarchical Data
The Diagram supports binding to hierarchical data structures where parent-child relationships are defined. This is useful for organizational charts, mind maps, and other tree-like structures.
To bind the Diagram to hierarchical data, configure the DataSource with a model that specifies the Children field, which holds the child records.
@(Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("_OrgChart", "Diagram")
)
.Model(m => m.Children("Items"))
)
.ShapeDefaults(sd => sd
.Content(c => c
.FontSize(17)
.Color("#444")
)
)
)The server-side controller returns JSON data with the hierarchical structure:
public ActionResult _OrgChart()
{
return Json(DiagramDataRepository.OrgChart());
}Using ShapeDataSource and ConnectionsDataSource
For more complex scenarios where shapes and connections must be managed separately, use the ShapeDataSource() and ConnectionsDataSource() methods. This approach enables CRUD operations on both shapes and connections independently.
@(Html.Kendo().Diagram<OrgChartShape, OrgChartConnection>()
.Name("diagram")
.DataSource(d => d
.ShapeDataSource()
.Model(m =>
{
m.Id(s => s.Id);
m.Field(s => s.Id).Editable(false);
m.Field(s => s.JobTitle);
m.Field(s => s.Color);
})
.Read("ReadShapes", "DiagramData")
.Create("CreateShape", "DiagramData")
.Update("UpdateShape", "DiagramData")
.Destroy("DestroyShape", "DiagramData")
)
.ConnectionsDataSource(d => d
.Model(m =>
{
m.Id(c => c.Id);
m.Field(c => c.Id).Editable(false);
m.Field(c => c.Text).Editable(false);
m.From(c => c.FromShapeId);
m.To(c => c.ToShapeId);
m.FromX(c => c.FromPointX);
m.FromY(c => c.FromPointY);
m.ToX(c => c.ToPointX);
m.ToY(c => c.ToPointY);
})
.Read("ReadConnections", "DiagramData")
.Create("CreateConnection", "DiagramData")
.Update("UpdateConnection", "DiagramData")
.Destroy("DestroyConnection", "DiagramData")
)
.ShapeDefaults(sd => sd
.Content(c => c
.FontSize(17)
.Color("#444")
)
)
.ConnectionDefaults(cd => cd
.Stroke(s => s
.Color("#586477")
.Width(2)
)
)
)The ShapeDataSource() method configures the data source for diagram shapes, while ConnectionsDataSource() handles the connections between shapes. This separation allows for independent CRUD operations on shapes and connections.
Customizing the Appearance
To create a network of visuals and customize the appearance of the Diagram, set its Visual configuration.
@(Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("_OrgChart", "Diagram")
)
.Model(m => m.Children("Items"))
)
.Editable(false)
.Layout(l => l.Type(DiagramLayoutType.Layered))
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
)
.ConnectionDefaults(cd => cd
.Stroke(s => s
.Color("#979797")
.Width(2)
)
)
.Events(events => events.DataBound("onDataBound"))
)