ASP.NET Core Diagram Overview

The Diagram is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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))
       )
   

       <kendo-diagram name="diagram">
           <hierarchical-datasource server-operation="false">
               <transport>
                   <read url="@Url.Action("_OrgChart", "Diagram")" />
               </transport>
               <schema>
                   <hierarchical-model children="Items"></hierarchical-model>
               </schema>
           </hierarchical-datasource>
           <editable enabled="false" />
           <layout type="DiagramLayoutType.Layered"></layout>
       </kendo-diagram>
   

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 Core (Demo)

• Diagram in Razor Pages

See Also

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