ASP.NET MVC Diagram Overview

The Diagram is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The Telerik UI Diagram HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Diagram widget.

The Diagram represents information in a schematic way and according to particular visualization techniques.

• Demo page for the Diagram

Basic Configuration

1. Return the data as JSON.

   public ActionResult _OrgChart()
   {
       return Json(DiagramDataRepository.OrgChart(), JsonRequestBehavior.AllowGet);
   }
   

2. In the view, configure the Diagram to use the action method that was created in the previous step.

       @(Html.Kendo().Diagram()
           .Name("diagram")
           .DataSource(dataSource => dataSource
               .Read(read => read
                   .Action("_OrgChart", "Diagram") // Specify the action method and controller names.
               )
               .Model(m => m.Children("Items"))
           )
           .Layout(l => l.Type(DiagramLayoutType.Layered))
       )
   

Functionality and Features

• Data binding—Configure the way of binding for the Diagram.
• Editing—You can enable editing operations for both the existing shapes and connections between them.
• Layout—The Diagram comes with built-in layout options that enable you to further alter its appearance.
• Shapes—The Diagram enables you to add various shapes.
• PDF export—You have the ability to export the existing Diagram to a PDF document.
• Advanced export—The Diagram enables you to further customize the exporting mechanism.

Next Steps

• Getting Started with the Diagram
• Basic Usage of the Diagram HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the Diagram for ASP.NET MVC (Demo)
• Knowledge Base Section