Tutorial 3: Overview and NodeListView

This tutorial shows how to use the Overview and NodeListView components.

1. Create a new ASP.NET Core MVC Application and add a DiagramView control to the page

Follow steps 1-5 from Tutorial 1: Getting started.

2. Add the controls to the page

Add the following initialization code for the DiagramView, Overview, and NodeListView controls in the Index method of the HomeController.cs:

HTML

diagram.ShowGrid = true;
diagram.GridColor = Color.Red;
diagram.AlignToGrid = true;
view.AllowInplaceEdit = true;

Overview overview = new Overview("overview1", "diagramView1");
overview.BackColor = Color.LightGray;
overview.DimColor = new MindFusion.Drawing.SolidBrush(Color.White);
ViewBag.Overview = overview;

NodeListView nodelist = new NodeListView("nodelist1");
for (var i = 0; i < Shape.Shapes.Count; ++i)
{
    if (Shape.Shapes[i].Id != "RoundRect1" && !Shape.Shapes[i].IsArrowhead)
    {
        var node = new MindFusion.Diagramming.ShapeNode();
        node.Brush = new MindFusion.Drawing.SolidBrush(Color.LightBlue);
        node.Shape = Shape.Shapes[i];
        nodelist.AddNode(node);
    }
}

Setting the Diagram's ShowGrid property to true will display the alignment grid, and setting the AlignToGrid property will ensure the that the sides newly created nodes will be aligned to the nearest grid point.

The view's AllowInplaceEdit property defines whether items' text can be edited inplace.

The Overview's BackColor property defines the background color of the control and the DimColor property sets the color of the displayed diagram.

Use the NodeListView control's AddNode method to add an arbitrary number of nodes to its nodes collection.

Remove the call to the Diagram's HTML Helper method and add the following form declaration instead:

HTML

@using (Html.BeginForm())
{
    <input type="submit" name="submitButton" value="submit" />    @Html.DiagramView(((DiagramView)ViewBag.DiagramView), new { style="width:700px; height:700px;" })

    @Html.Overview(((Overview)ViewBag.Overview), new { style="width:200px; height:200px;" })

    @Html.NodeListView(((NodeListView)ViewBag.NodeListView), new { style="width:200px; height:500px;" })

3. Submitting the form

Upon form submission the DiagramView control will serialize itself in JSON format and will store the serialized string in a hidden field. This field will be added automatically to the form by the DiagramView control and will have a name matching the following pattern: DiagramViewId + "_PostData" e.g. "diagramView1_PostData". You can access the field through the Request.Form collection and pass the data to the DiagramView's FromJson method in order to keep the changes made from the client. The view's FromRequest static method can be used as a shortcut to achieve the same effect. Change the DiagramView control initializer as follows to persist the changes:

C#

DiagramView view = DiagramView.FromRequest("diagramView1", Request);

4. Running the application

Run the application. Try drawing some nodes and/or links. Double-click on an object to inplace-edit it's text. Drag items from the NodeListView control onto the Diagram to create new nodes. Submit the form to see how the control will store your changes.
The image below depicts how the application would look like with some nodes and links added to the diagram.