DiagramExtension Class
The Diagram extension.
Namespace: DevExpress.Web.Mvc
Assembly: DevExpress.Web.Mvc5.v19.2.dll
Declaration
Related API Members
The following members return DiagramExtension objects:
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.
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()
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()
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);
}
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()
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.
@Html.DevExpress().Diagram(settings => {
settings.Name = "Diagram";
settings.SimpleView = true;
}).Import(Model).GetHtml()
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()
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.