ASP.NET MVC Diagram Overview

Telerik UI for ASP.NET MVC Ninja image

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.

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.

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

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