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.

            .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">
                    <read url="@Url.Action("_OrgChart", "Diagram")" />
                    <hierarchical-model children="Items"></hierarchical-model>
            <editable enabled="false" />
            <layout type="DiagramLayoutType.Layered"></layout>

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