ASP.NET Core Diagram Overview

Telerik UI for ASP.NET Core Ninja image

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.

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.

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

See Also

In this article