Overview.cshtml

@using Syncfusion.EJ2;
@using EJ2CoreSampleBrowser.Controllers.Diagram;


@section ControlsSection{
    <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" dataSource="new DataManager(){ Data = (List<EJ2CoreSampleBrowser.Controllers.Diagram.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" style=" width:50%; padding:0px;right:30px;bottom:20px;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>

    <style type="text/css">
        #diagram, #overview {
            display: block;
        }

        .row {
            display: block;
        }
    </style>

    <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.style = { fill: 'transparent', strokeWidth: 2 };
            return obj;
        }
        function getConnectorDefaults(connector, diagram) {
            connector.targetDecorator.shape = 'None';
            connector.type = 'Orthogonal';
            connector.style.strokeColor = 'gray';
            return connector;
        }
        function setNodeTemplate(obj, diagram) {
            var content = new ej.diagrams.StackPanel();
            content.id = obj.id + '_outerstack';
            content.orientation = 'Horizontal';
            content.style.strokeColor = 'gray';
            content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

            var image = new ej.diagrams.ImageElement();
            image.width = 50;
            image.height = 50;
            image.style.strokeColor = 'none';
            image.source = obj.data.Image;
            image.id = obj.id + '_pic';
            var innerStack = new ej.diagrams.StackPanel();
            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();
            text.content = obj.data.Name;
            text.style.color = 'black';
            text.style.bold = true;
            text.style.strokeColor = 'none';
            text.horizontalAlignment = 'Left';
            text.style.fill = 'none';
            text.id = obj.id + '_text1';

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

            content.children = [image, innerStack];

            return content;
        }
    </script>
}
@section ActionDescription{
    <div id="action-description">
        <p>
            This sample visualizes an organizational structure along with an overview for easily navigating the large organizational
            structure using Overview Panel.

        </p>
    </div>
}
@section Meta{
    <meta name="description" content="This demo for EJ2 ASP.NET Core Diagram control visualizes easy navigation of large data in an organizational chart using the overview panel."/>
}
@section Description{
    <div id="description">
        <p>
            This example shows how to render the Overview Panel and how to display a preview (overall view) of the entire content of
            a diagram. This helps you look at the overall picture of a large diagram and also to navigate (pan or zoom) to a
            particular position of the page. The <code>sourceID</code> property can be used to map the diagram control with Overview Panel.
        </p>
        <br>
    </div>
}