Diagram for ASP.NET AJAX - Now in Your Telerik Toolbox

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.

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);
  • Pan (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

Let 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):

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 Telerik.com 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.