Telerik blogs

The release of the Telerik ASP.NET Diagram control is now available for download. RadDiagram will help you create rich, high-performing and interactive diagrams with ease.

Rich User Interactions

Since we want to collect more feedback, we decided to launch the current Diagram release as a Beta. The official release date is not yet decided but you’ll have enough time to play with the control and its demos, to share your feedback and submit your feature requests.

Main Features Available in the Beta Release

  • Rich End-User Interaction and Experience
    • Select, Rotate, Resize, Bring to Front/Back and Translate (drag & drop) a single or multiple shapes and connections;
    • Cut (Ctrl+X), Copy (Ctrl+C), Paste (Ctrl+V), Delete (Delete/BackSpace), Undo (Ctrl+Z) and Redo (Ctrl+Y);
    • Support for Custom Elements and TemplatesPan (Ctrl+Left mouse click) and Zoom (mouse wheel);
    • Shapes Connection and Editing;
    • Shapes and Connections Text Setting;
    • Shapes and Connections Deletion.
  • Excellent Client-side Responsiveness based on HTML5 and SVG.
  • Multitude of predefined layouts – 3 base types (tree, force-directed and layered) with the option to fine-tune them with 10 sub-types (TreeDown, TipOverTree, MindmapHorizontal, LayeredHorizontal, etc.).
  • Easy-to-Customize Elements and Shape Templates
  • Built-in Essential Shapes and Ability to Define Custom Shapes.
  • Save and Load the Diagram structure as JSON.
  • Server-side data binding options.

Configuration of the Diagram tool

Flow DiagramLet me show you how easy you can create a flow diagram consisting of two shapes and an arrow connector (like in the screenshot on the right):

<telerik:RadDiagram ID="RadDiagram1" runat="server">
        <telerik:DiagramShape Id="ParentShape" Width="100" Height="70"  Type="rectangle" Background="#25a0da">
            <ContentSettings Text="Parent" Color="White" />
        <telerik:DiagramShape Id="ChildShape" Height="50" X="170" Y="10" Type="circle" Background="#FFBE33">
            <ContentSettings Text="Child" Color="White" />
        <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
            <FromSettings Connector="Right" ShapeId="ParentShape" />
            <ToSettings Connector="Left" ShapeId="ChildShape" />

The ShapeCollection block is a collection of all shapes which are set by the developer. In our case, these are the parent rectangular shape and its child circle shape. The Id, Width, Height, X, Y, Type and Background properties are self-explanatory.

The purpose of the ConnectionsCollection is to define the connection elements that link the shapes in the diagram. The StartCap and EndCap properties specify whether the connection will start or end with an arrow, a dot or no cap. The FromSettings and ToSetting define the connection settings for the source and target shapes, respectively.

Note that these properties are a small portion of the rich server-side API of RadDiagram, which also offers more than 11 different layouts that can be set via the LayoutSettings, Type and SubType properties.

Where to Get it

The Beta installations are available at the bottom of the Download UI for ASP.NET AJAX - Version: 2014.1 403 (Apr 3, 2014) section under Your accounts. You can obtain the trial MSI installation right from here.

Other Helpful Resources

If you want to save time and skip the local demo installations, you can always check the live demos.

The online Documentation features more detail not only for the features listed in this blog post, but also for the client and server-side APIs of the diagram.

The feedback portal and the forums are always open for any feedback that you might have and want to share with us and the community.

The release notes are available here.

Beta Program

The purpose of the Beta program is to present our new Diagram control to the community and allow all of you to give it a spin and share ideas, suggestions for improvement, feature requests and bug reports.

Here are some of the things we’d love to hear back from you on:

  • What do you think of the UI?
  • Do you like the performance of the control?
  • What are the scenarios, in which you will use the control?
  • What are your suggestions for new features? What is more important for you: a design-time configuration wizard or another feature?
  • Do you experience any configuration or runtime problems?

Еveryone is welcome to take part in the Beta program and the most active contributors will be, of course, awarded with Telerik points. For those who haven't participated in this program, you can redeem your Telerik Points for discounted licenses or renewals.

AJAX Beta Diagram Blog Banner

About the Author

Rumen Jekov

Rumen Jekov (@Rumen_Jekov) started his career at Telerik’s ASP.NET team in 2004 as a tech support engineer and passed through the position of a team lead to a product manager. He has answered more than 51,500 tickets helping customers to achieve their goals. Presently, he is a product owner of Telerik UI for ASP.NET AJAX and a manager of the AJAX crew at Progress. Off work, he enjoys traveling across the globe, watching movies and tech shows, reading books and listening to podcasts.


Comments are disabled in preview mode.