Telerik RadDiagram are powerful diagramming framework that can bring to life your rich data-visualization scenarios. In order to use the Telerik Diagramming Framework in your projects you have to add references to the following assemblies:
This tutorial will walk you through the main concepts and tools of RadDiagram while helping you to create the flow diagram of an "if-else" operator.
The graph object model is the main concept behind the diagramming framework. It contains the following three main objects:
graph - this is the structure that contains the RadDiagramShapes and RadDiagramConnections. In the Telerik Diagramming Framework the graph is represented by the RadDiagram class.
shape - the shape describes a node of a Graph that in the Telerik Diagramming Framework is represented by the RadDiagramShape class.
connection - the connection describes the edges of the graph and it is basically an object that connects zero, one or two shapes. In the Telerik Diagramming Framework the connection is represented by the RadDiagramConnection class.
The RadDiagram items are represented by the RadDiagramItem class. Therefore both RadDiagramConnection and RadDiagramShape classes derive from the RadDiagramItem class.
In order to populate RadDiagram with RadDiagramItems you can add RadDiagramShapes and RadDiagramConnections by using the Property Builder.
The Property Builder allows you to drag a shapes from the RadDiagramToolbox and drop it onto the RadDiagram surface. Afterwards, you can connect several shapes by using the connectors. The RadDiagramRibbonBar gives you a set of options to customize the diagram and save the changes as well.
In order to create a diagram describing the flow of an "if-else" operator, you will need 4 shapes - two will represent the statements, one will describe the condition and one will represent the final result of the operator.
The RadDiagramShape exposes an ElementShape property that allows you to create a custom geometry or use predefined shape geometry.
Finally, you can connect all shapes using RadDiagramConnections.