Edit this page

Getting Started

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:

  • Telerik.WinControls.RadDiagram

  • Telerik.WinControls

  • Telerik.WinControls.UI

  • TelerikCommon

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.

diagram-getting-started 001

Graph Object Model

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.

note

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.

diagram-getting-started 002

diagram-getting-started 003

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.

note

The RadDiagramShape exposes an ElementShape property that allows you to create a custom geometry or use predefined shape geometry.

diagram-getting-started 004

Finally, you can connect all shapes using RadDiagramConnections.

See Also

Was this article helpful? Yes No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy