# diagram-organization-chart

> Organizational chart diagram populated from hierarchical data with switchable orientation, subtree alignment, and spacing.

**Framework:** aspnet-mvc  **Component:** Diagram  **Variant:** organization-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/diagram-organization-chart.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.Diagram
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-organization-chart/OrganizationalChartLayout.cshtml

```cshtml
@using Syncfusion.EJ2;
@using EJ2MVCSampleBrowser.Models;

@section ControlsSection {
    <div class="col-lg-8 control-section">
        <div class="content-wrapper">
            @(Html.EJS().Diagram("diagram").Width("100%").Height("700px").Created("create")
                        .GetNodeDefaults("nodeDefaults").GetConnectorDefaults("connectorDefaults")
                    .DataSourceSettings(ss => ss.Id("Id").ParentId("Manager").DataSource(new DataManager() { Data = (List<OrganizationalDetails>)ViewData["Nodes"] }))
                    .Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.OrganizationalChart).GetLayoutInfo("getLayoutInfo"))
                    .SnapSettings(s => s.Constraints(Syncfusion.EJ2.Diagrams.SnapConstraints.None)).Render())
        </div>
    </div>
    <div class="col-lg-4 property-section diagram-orgchart-panel">
        <div class="property-panel-header">
            Properties
        </div>
        <div class="row  property-panel-content" id="appearance">
            <div class="row" style="padding-top: 10px">
                <div class="row row-header">
                    Orientation
                </div>
                <div id="orientation">
                    <div class="row" style="padding-top: 8px">
                        <div class="image-pattern-style  e-selected-orientation-style" id="topToBottom" style="background-image:url('@Url.Content("~/Content/images/diagram/Images/common-orientation/toptobottom.png")'); margin-right: 3px">
                        </div>
                        <div class="image-pattern-style" id="bottomToTop" style="background-image:url('@Url.Content("~/Content/images/diagram/Images/common-orientation/bottomtotop.png")'); margin: 0px 3px">
                        </div>
                        <div class="image-pattern-style" id="leftToRight" style="background-image:url('@Url.Content("~/Content/images/diagram/Images/common-orientation/lefttoright.png")'); margin-right:0px 3px">
                        </div>
                    </div>
                    <div class="row" style="padding-top: 8px">
                        <div class="image-pattern-style" id="rightToLeft" style="background-image:url('@Url.Content("~/Content/images/diagram/Images/common-orientation/righttoleft.png")'); margin: 0px 3px">
                        </div>
                    </div>
                </div>
                <div class="row row-header" style="padding-top: 10px">
                    Subtree Alignment
                </div>
                <div id="pattern">
                    <div class="row" style="padding-top: 8px">
                        <div class="image-pattern-style" id="pattern1" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_1.png")'); margin-right: 3px">
                        </div>
                        <div class="image-pattern-style e-selected-pattern-style" id="pattern2" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_2.png")'); margin: 0px 3px">
                        </div>
                        <div class="image-pattern-style" id="pattern3" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_3.png")'); margin: 0px 3px">
                        </div>
                    </div>
                    <div class="row" style="padding-top: 8px">
                        <div class="image-pattern-style" id="pattern4" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_4.png")'); margin-right: 3px">
                        </div>
                        <div class="image-pattern-style" id="pattern5" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_5.png")'); margin: 0px 3px">
                        </div>
                        <div class="image-pattern-style" id="pattern6" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_6.png")'); margin: 0px 3px">
                        </div>
                    </div>
                    <div class="row" style="padding-top: 8px">
                        <div class="image-pattern-style" id="pattern7" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_7.png")'); margin-right: 3px">
                        </div>
                        <div class="image-pattern-style" id="pattern8" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_8.png")'); margin: 0px 3px">
                        </div>
                        <div class="image-pattern-style" id="pattern9" style="background-image:url('@Url.Content("~/Content/images/diagram/patternimages/Pattern_9.png")'); margin: 0px 3px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row  property-panel-content" style="padding-top: 10px">
            <div class="row row-header">
                Behavior
            </div>
            <div class="row" style="padding-top: 8px">
                <div style="display: table;height: 35px;" class="col-xs-6">
                    <div style="display: table-cell; vertical-align: middle">Horizontal Spacing</div>
                </div>
                <div class="col-xs-6">
                    @Html.EJS().NumericTextBox("hSpacing").Format("###.##").Width("110px").Change("hSpacingChange").Min(20).Max(60).Step(2).Value(30).Render()
                </div>
            </div>
            <div class="row" style="padding-top: 8px">
                <div style="display: table;height: 35px;" class="col-xs-6">
                    <div style="display: table-cell; vertical-align: middle">Vertical Spacing</div>
                </div>
                <div class="col-xs-6">
                    @Html.EJS().NumericTextBox("vSpacing").Format("###.##").Width("110px").Change("vSpacingChange").Min(20).Max(60).Step(2).Value(30).Render()
                </div>
            </div>
        </div>
    </div>
    <style>
        #diagram {
            display: block;
        }
        /* Css for images in property panel  */
        .diagram-orgchart-panel .image-pattern-style {
            background-color: white;
            background-size: contain;
            background-repeat: no-repeat;
            height: 75px;
            width: calc((100% - 18px) / 3);
            cursor: pointer;
            border: 1px solid #D5D5D5;
            background-position: center;
            float: left;
        }

        .diagram-orgchart-panel .image-pattern-style:hover {
            border-color: gray;
            border-width: 2px;
        }
        /* Property panel CSS */
        .diagram-orgchart-panel .row {
            margin-left: 0px;
            margin-right: 0px;
            display: block;
        }

        .diagram-orgchart-panel .row-header {
            font-size: 13px;
            font-weight: 500;
        }

        .diagram-orgchart-panel .row-header1 {
            font-size: 12px;
            padding-left: 2px;
            font-weight: 400;
        }

        /* Selection indicator */
        .diagram-orgchart-panel .e-selected-orientation-style {
            border-color: #006CE6;
            border-width: 2px;
        }

        .diagram-orgchart-panel .e-selected-pattern-style {
            border-color: #006CE6;
            border-width: 2px;
        }

        .diagram-orgchart-panel .col-xs-6 {
            padding-left: 0px;
            padding-right: 0px;
        }
    </style>

    <script type="text/javascript">

        function create() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
            diagram.dataBind();
        }

        function hSpacingChange(args) {
            var hSpacing = document.getElementById("hSpacing");
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.layout.horizontalSpacing = Number(hSpacing.value);
            diagram.dataBind();
        }

        function vSpacingChange(args) {
            var vSpacing = document.getElementById("vSpacing");
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.layout.verticalSpacing = Number(vSpacing.value);
            diagram.dataBind();
        }

        var orien;
        var typ;
        //Click Event for orientation of the PropertyPanel.
        document.getElementById('orientation').onclick = function (args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            var target = args.target;
            @*custom code start*@
            var selectedElement = document.getElementsByClassName('e-selected-orientation-style');
            if (selectedElement.length) {
                selectedElement[0].classList.remove('e-selected-orientation-style');
            }
            if (!target.classList.contains('e-selected-orientation-style')) {
                target.classList.add('e-selected-orientation-style');
            }
            @*custom code end*@
            if (target.className === 'image-pattern-style e-selected-orientation-style') {
                var id = target.id;
                var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);
                diagram.layout.orientation = orientation1;
                diagram.dataBind();
                diagram.doLayout();
            }
        };
        //Click Event for pattern of the PropertyPanel.
        document.getElementById('pattern').onclick = function (args) {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            var target = args.target;
            @*custom code start*@
            var selectedpatternElement = document.getElementsByClassName('e-selected-pattern-style');
            if (selectedpatternElement.length) {
                selectedpatternElement[0].classList.remove('e-selected-pattern-style');
            }
            if (!target.classList.contains('e-selected-pattern-style')) {
                target.classList.add('e-selected-pattern-style');
            }
            @*custom code end*@
            if (target.className === 'image-pattern-style e-selected-pattern-style') {
                var subTreeOrientation;
                var subTreeAlignment;
                switch (target.id) {
                    case 'pattern1':
                        subTreeOrientation = 'Vertical';
                        subTreeAlignment = 'Alternate';
                        break;
                    case 'pattern2':
                        subTreeOrientation = 'Vertical';
                        subTreeAlignment = 'Left';
                        break;
                    case 'pattern3':
                        subTreeOrientation = 'Vertical';
                        subTreeAlignment = 'Left';
                        break;
                    case 'pattern4':
                        subTreeOrientation = 'Vertical';
                        subTreeAlignment = 'Right';
                        break;
                    case 'pattern5':
                        subTreeOrientation = 'Vertical';
                        subTreeAlignment = 'Right';
                        break;
                    case 'pattern6':
                        subTreeOrientation = 'Horizontal';
                        subTreeAlignment = 'Balanced';
                        break;
                    case 'pattern7':
                        subTreeOrientation = 'Horizontal';
                        subTreeAlignment = 'Center';
                        break;
                    case 'pattern8':
                        subTreeOrientation = 'Horizontal';
                        subTreeAlignment = 'Left';
                        break;
                    case 'pattern9':
                        subTreeOrientation = 'Horizontal';
                        subTreeAlignment = 'Right';
                        break;
                    default:
                        if (selectedpatternElement.length) {
                            selectedpatternElement[0].classList.remove('e-selected-pattern-style');
                        }
                }
                diagram.layout.getLayoutInfo = function (node, options) {
                    if (target.id === 'pattern4' || target.id === 'pattern3') {
                        options.offset = -50;
                    }
                    if (node.data.Role === 'General Manager') {
                        options.assistants.push(options.children[0]);
                        options.children.splice(0, 1);
                    }
                    if (!options.hasSubTree) {
                        options.orientation = subTreeOrientation;
                        options.type = subTreeAlignment;
                    }
                };
                diagram.dataBind();
                diagram.doLayout();
            }
        };

        function getLayoutInfo(node, options, orientation, type) {
            if (node.data.Role === 'General Manager') {
                options.assistants.push(options.children[0]);
                options.children.splice(0, 1);
            }
            if (!options.hasSubTree) {
                options.type = 'Right';
            }
        }

        function nodeDefaults(obj, diagram) {
            obj.shape = {
                type: 'Text', content: obj.data.Role,
                margin: { left: 10, right: 10, top: 10, bottom: 10 }
            };
            obj.backgroundColor = obj.data.Color;
            obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };
            obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };
            obj.expandIcon.verticalAlignment = 'Center';
            obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
            obj.collapseIcon.offset = { x: .5, y: 1 };
            obj.collapseIcon.verticalAlignment = 'Center';
            obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
            obj.collapseIcon.height = 10;
            obj.collapseIcon.width = 10;
            obj.collapseIcon.shape = 'None';
            obj.collapseIcon.fill = 'lightgray';
            obj.width = 120;
            obj.height = 30;
            return obj;
        }

        function connectorDefaults(connector, diagram) {
            connector.targetDecorator.shape = 'None';
            connector.type = 'Orthogonal';
            connector.constraints = 0;
            connector.cornerRadius = 0;
            return connector;
        }
    </script>
}

```

### src/components/diagram-organization-chart/OrganizationalChartLayoutController.cs

```cs
using EJ2MVCSampleBrowser.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: HierarchicalLayout
        public ActionResult OrganizationalChartLayout()
        {
            ViewData["Nodes"] = OrganizationalDetails.GetAllRecords();
            return View();
        }
    }
}
```