All docs
V19.2
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

DiagramExtension Class

The Diagram extension.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v19.2.dll

Declaration

public class DiagramExtension :
    ExtensionBase
Public Class DiagramExtension
    Inherits ExtensionBase

Remarks

The Diagram extension's (DiagramExtension) diagram editor allows you to create professional diagrams online. You can import a diagram data file or bind the extension to a data source.

Diagram

Implementation Details

To declare the Diagram in a View, invoke the Diagram helper method. The method returns the Diagram extension object that is implemented by the DiagramExtension class. To configure the Diagram extension, pass the DiagramSettings object to the Diagram helper method as a parameter.

The MVCxClientDiagram class object represents the Diagram's client counterpart.

Declaration

The following code illustrates how to add the Diagram to a view:

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
}).GetHtml()

Features

Bind to Data

The Diagram extension can load external tree-like and graph structures. The supported data structures are listed below.

Node and Edge Data Sources

Use the Bind(Object, Object) method to bind the Diagram extension to two data sources: one for shapes (nodeDataObject) and another for shape connectors (edgeDataObject). You should add mapping information for a shape's Key and a connector's Key, FromKey and ToKey properties.

The SettingsAutoLayout property allows you to specify the auto-layout algorithm and orientation the extension should use to build a diagram.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.BatchUpdateRouteValues = new { Controller = "DataBinding", Action = "NodesAndEdgesUpdate" };

    settings.Mappings.Node.Key = "ID";
    settings.Mappings.Edge.Key = "ID";
    settings.Mappings.Edge.FromKey = "FromID";
    settings.Mappings.Edge.ToKey = "ToID";

    settings.SettingsAutoLayout.Type = DevExpress.Web.ASPxDiagram.DiagramAutoLayout.Layered;
    settings.SettingsAutoLayout.Orientation = Orientation.Vertical;
}).Bind(Model.Objects, Model.Connections).GetHtml()

See demo

Linear Tree-Like Data Structure

Use the Bind(Object) method to bind the Diagram extension to a linear tree-like data structure. You should set the Key and ParentKey properties that allow the Diagram extension to transform the linear structure to hierarchical.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.BatchUpdateRouteValues = new { Controller = "DataBinding", Action = "LinearUpdate" };

    settings.Mappings.Node.Key = "ID";
    settings.Mappings.Node.ParentKey = "ParentID";

    settings.SettingsAutoLayout.Type = DevExpress.Web.ASPxDiagram.DiagramAutoLayout.Tree;
}).Bind(Model).GetHtml()

See demo

Load and Save Diagram Content

Server Side

Use the Import(String) and Export() methods to load and save the diagram data in JSON format on the server side.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
}).Import(Model).GetHtml()
public ActionResult DiagramView() {
    var content = System.IO.File.ReadAllText(MapPath("~/App_Data/diagram-flow.json"));
    return View("DiagramView", "DiagramView", content);
}

See demo

Client Side

Use the Import(data) and Export methods to load and save the diagram data in JSON format on the client side.

<script type="text/javascript">
    var diagramData;
</script>

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
}).GetHtml()

@Html.DevExpress().Button(settings => {
    settings.Name = "btnSave";
    settings.Text = "Save";
    settings.ClientSideEvents.Click = "function (s,e) {diagramData = Diagram.Export();}";
}).GetHtml()

@Html.DevExpress().Button(settings => {
    settings.Name = "btnLoad";
    settings.Text = "Load";
    settings.ClientSideEvents.Click = "function (s,e) {Diagram.Import(diagramData);}";
}).GetHtml()
Note

The ASPxDiagram stores an opened diagram's data in its own text format. We recommend you to not modify data returned by the Export() method. A modified document can be loaded incorrectly.

Custom Shapes

Use the CustomShapes property to extend the collection of built-in shapes with custom shapes, and the SettingsToolbox property to add a custom shape category to a data toolbox.

Note

Shape images should be supplied as SVG files.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SettingsToolbox.Groups.Add(g => {
        g.Category = DevExpress.Web.ASPxDiagram.DiagramShapeCategory.Custom;
        g.CustomCategoryName = "hardware";
        g.Title = "Hardware";
    });
    settings.CustomShapes.Add(c => {
        c.Type = "internet";
        c.Category = "hardware";
        c.Title = "Internet";
        c.BackgroundImageUrl = "../Content/customshapes/shapes/internet.svg";
        c.BackgroundImageLeft = 0.15M;
        c.BackgroundImageTop = 0;
        c.BackgroundImageWidth = 0.7M;
        c.BackgroundImageHeight = 0.7M;
        c.DefaultWidth = 0.75M;
        c.DefaultHeight = 0.75M;
        c.DefaultText = "Internet";
        c.AllowEditText = true;
        c.TextLeft = 0;
        c.TextTop = 0.7M;
        c.TextWidth = 1;
        c.TextHeight = 0.3M;
        c.ConnectionPoints.Add(0.5M, 0);
        c.ConnectionPoints.Add(0.9M, 0.5M);
        c.ConnectionPoints.Add(0.5M, 1);
        c.ConnectionPoints.Add(0.1M, 0.5M);
    });
    ...
}).Import(Model).GetHtml()

See demo

Simple View

Set the SimpleView option to true to enable Simple View mode. In Simple View mode, the extension does not divide the work area into pages and the diagram's content occupies all the available area inside the extension.

Diagram

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SimpleView = true;
}).Import(Model).GetHtml()

See demo

Read Only Mode

Set the ReadOnly property to true to prohibit edit operations.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.ReadOnly = true;
}).Import(Model).GetHtml()

See demo

UI Customization

Use the following properties to customize the Diagram extension's UI elements:

  • The SettingsToolbox property controls the toolbox's visibility and specifies the visible groups.
  • The SettingsSidePanel property controls the side panel's visibility.
@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SettingsToolbox.Groups.Add(g => {
        g.Category = DevExpress.Web.ASPxDiagram.DiagramShapeCategory.General;
    });
    settings.SettingsToolbox.Groups.Add(g => {
        g.Category = DevExpress.Web.ASPxDiagram.DiagramShapeCategory.Custom;
        g.CustomCategoryName = "hardware";
        g.Title = "Hardware";
    });
    settings.SettingsSidePanel.Visibility = DevExpress.Web.ASPxDiagram.DiagramPanelVisibility.Visible;
    settings.CustomShapes.Add(c => {
        c.Type = "internet";
        c.Category = "hardware";
        c.Title = "Internet";
        ...

}).Import(Model).GetHtml()

Export to Image Format

You can export a diagram to SVG, PNG, and JPEG file formats.

To export a diagram, click Export and select the file format.

Inheritance

Object
ExtensionBase
DiagramExtension
See Also