New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Remote Binding
The Telerik UI Diagram for ASP.NET Core provides a templating engine and a built-in DataSource which allow you to quickly set up and implement the data-binding functionality.
Getting Started
To bind the Diagram to remote data, specify the DataSource option. You can either create the data source outside the Diagram, or pass it in it. If multiple Diagrams are bound to the same data set, you have to create the data source as an object to which you can refer in the different helpers. If the Diagram is the only item that is bound to the data, create it inline.
Razor
@(Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
// the default type of the DataSource is Custom
.Read(read => read
.Action("_OrgChart", "Diagram")
)
.Model(m => m.Children("Items"))
)
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
)
// Other configuration.
)Customizing the Appearance
To create a network of visuals and customize the appearance of the Diagram, set its Visual configuration.
Razor
@(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"))
)