Overview Control

4 Apr 202212 minutes to read

Overview control allows to see a preview or an overall view of the entire content of a diagram. This helps you to look at the overall picture of a large diagram and also to navigate, pan, or zoom, on a particular position of the page.

When you work on a very large diagram, you may not know the part you are actually working on, or navigation from one part to another might be difficult. One solution for navigation is to zoom out the entire diagram and find where you are. Then, you can zoom in a particular area you want to. This solution is not suitable when you need some frequent navigation.

Overview control solves these problems by showing a preview, that is, an overall view of the entire diagram. A rectangle indicates viewport of the diagram. Navigation becomes easy by dragging this rectangle.

Create overview

The sourceID property of overview should be set with the corresponding diagram ID for the overall view.

The width and height properties of the overview allows to define the size of the overview.

Zoom and Pan

In overview, the view port of the diagram is highlighted with a red colored rectangle. Diagram can be zoomed/panned by interacting with that. You can interact with overview as follows:

  • Resize the rectangle: Zooms in/out the diagram.
  • Drag the rectangle: Pans the diagram.
  • Click at a position: Navigates to the clicked region.
  • Choose a particular region by clicking and dragging: Navigates to the specified region.
<div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <ejs-diagram id="diagram" width="100%" height="550px" setNodeTemplate="@ViewBag.setNodeTemplate" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
                <e-diagram-datasourcesettings id="Id" parentId="ReportingPerson" dataManager="new DataManager(){ Data = (List<OverviewData>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
                <e-diagram-layout type="OrganizationalChart" horizontalSpacing="15" verticalSpacing="50"></e-diagram-layout>
                <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
                <e-diagram-scrollsettings scrollLimit="Infinity"></e-diagram-scrollsettings>
            </ejs-diagram>
        </div>
    </div>
    <div class="col-lg-4 property-section" style="padding:0px;right:49px;bottom:38px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute">
    <ejs-overview id="overview" width="100%" height="150px" sourceID="diagram"></ejs-overview>
</div>


<script type="text/javascript">

    function diagramCreated() {
        var diagram = document.getElementById("diagram").ej2_instances[0];
       // diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
        diagram.dataBind();
    }
    function getLayoutInfo(node, tree) {
        if (!tree.hasSubTree) {
            tree.orientation = 'Vertical';
            tree.type = 'Right';
        }
    }
    function getNodeDefaults(obj, diagram) {
        obj.height = 50;
        obj.fillColor = '#6BA5D7'
        obj.style = { fillColor: '#6BA5D7', strokeWidth: 2, borderColor: 'white', strokeColor: 'white' };
        return obj;
    }
    function getConnectorDefaults(connector, diagram) {
        connector.style.strokeColor = '#6BA5D7';
        connector.style.fill = '#6BA5D7';
        connector.style.strokeWidth = 2;
        connector.targetDecorator.style.fill = '#6BA5D7';
        connector.targetDecorator.style.strokeColor = '#6BA5D7';
        connector.targetDecorator.shape = 'None';
        connector.type = 'Orthogonal';
        connector.style.strokeColor = '#6BA5D7';
        return connector;
    }

    function setNodeTemplate(obj, diagram) {
        var content = new ej.diagrams.StackPanel();
        content.id = obj.id + '_outerstack';
        content.orientation = 'Horizontal';
        content.style.fill = '#6BA5D7';
        content.style.strokeColor = 'none'
        content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

        var innerStack = new ej.diagrams.StackPanel();
        innerStack.style.fill = '#6BA5D7';
        innerStack.style.strokeColor='none'
        innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
        innerStack.id = obj.id + '_innerstack';

        var text = new ej.diagrams.TextElement();
        var style = text.style;
        text.content = obj.data.Name;
        style.color = 'white';
        style.bold = true;
        style.strokeColor = 'none';
        text.horizontalAlignment = 'Left';
        style.fill = 'none';
        text.id = obj.id + '_text1';

        var desigText = new ej.diagrams.TextElement();
        var style = desigText.style;
        desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };
        desigText.content = obj.data.Designation;
        style.color = 'white';
        style.strokeColor = 'none';
        style.fontSize = 12;
        style.fill = 'none';
        desigText.horizontalAlignment = 'Left';
        style.textWrapping = 'Wrap';
        desigText.id = obj.id + '_desig';
        innerStack.children = [text, desigText];

        content.children = [innerStack];

        return content;
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using sample1.Models;

namespace sample1.Controllers
{
    public partial class DiagramController : Controller
    {
        // GET: Overview
        public ActionResult Overview()
        {
           ViewBag.Nodes = OverviewData.GetData();
            return View();
        }
    }
}

    public class OverviewData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Designation { get; set; }
        public string ReportingPerson { get; set; }
        public string Image { get; set; }

        public OverviewData(string id, string name, string designation, string reportingperson)
        {
            this.Id = id;
            this.Name =name;
            this.Designation =designation;
            this.ReportingPerson =reportingperson;
            
        }

        public static List<OverviewData> GetData()
        {
            List<OverviewData> data = new List<OverviewData>();
            data.Add(new OverviewData("parent", "Maria Anders", "Managing Director", ""));
            data.Add(new OverviewData("1", "Ana Trujillo", "Project Manager", "parent"));
            data.Add(new OverviewData("2", "Anto Moreno", "Project Manager", "parent"));
            data.Add(new OverviewData("3", "Thomas Hardy", "Project Lead", "1"));
            data.Add(new OverviewData("4", "Christina kaff", "Project Lead", "2"));
            data.Add(new OverviewData("5", "Hanna Moos", "Senior S/w Engg", "3"));
            data.Add(new OverviewData("6", "Peter Citeaux", "Senior S/w Engg", "4"));
            return data;

        }
    }