Edit this page

Diagram HtmlHelper Overview

The Diagram HtmlHelper extension is a server-side wrapper for the Kendo UI Diagram widget.

For more information on the HtmlHelper, refer to the article on the Diagram HtmlHelper for ASP.NET MVC.

Configuration

The following example demonstrates the basic configuration for the Diagram.

Example
    @(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))
    )

Event Handling

You can subscribe to all Diagram events.

The following example demonstrates how to subscribe to events by a handler name.

Example
    @(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))
          .Events(e => e
              .Click("diagram_click")
          )
    )

    <script>
        function diagram_click() {
            // Handle the click event
        }
    </script>

Reference

Existing Instances

To reference an existing Kendo UI Diagram instance, use the jQuery.data() configuration option. Once a reference is established, use the Diagram API to control its behavior.

The following example demonstrates how to access an existing Diagram instance.

Example
    //Put this after your Kendo UI Diagram for ASP.NET Core declaration.
    <script>
        $(function() {
            //Notice that the Name() of the Diagram is used to get its client-side instance.
            var diagram = $("#diagram").data("kendoDiagram");
        });
    </script>

See Also