{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-organization-chart",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "organization-chart",
  "dependencies": [
    "Syncfusion.AspNetMvc.Diagram"
  ],
  "description": "Organizational chart diagram populated from hierarchical data with switchable orientation, subtree alignment, and spacing.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/diagram-organization-chart.md"
  },
  "files": [
    {
      "target": "src/components/diagram-organization-chart/OrganizationalChartLayout.cshtml",
      "content": "@using Syncfusion.EJ2;\n@using EJ2MVCSampleBrowser.Models;\n\n@section ControlsSection {\n    <div class=\"col-lg-8 control-section\">\n        <div class=\"content-wrapper\">\n            @(Html.EJS().Diagram(\"diagram\").Width(\"100%\").Height(\"700px\").Created(\"create\")\n                        .GetNodeDefaults(\"nodeDefaults\").GetConnectorDefaults(\"connectorDefaults\")\n                    .DataSourceSettings(ss => ss.Id(\"Id\").ParentId(\"Manager\").DataSource(new DataManager() { Data = (List<OrganizationalDetails>)ViewData[\"Nodes\"] }))\n                    .Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.OrganizationalChart).GetLayoutInfo(\"getLayoutInfo\"))\n                    .SnapSettings(s => s.Constraints(Syncfusion.EJ2.Diagrams.SnapConstraints.None)).Render())\n        </div>\n    </div>\n    <div class=\"col-lg-4 property-section diagram-orgchart-panel\">\n        <div class=\"property-panel-header\">\n            Properties\n        </div>\n        <div class=\"row  property-panel-content\" id=\"appearance\">\n            <div class=\"row\" style=\"padding-top: 10px\">\n                <div class=\"row row-header\">\n                    Orientation\n                </div>\n                <div id=\"orientation\">\n                    <div class=\"row\" style=\"padding-top: 8px\">\n                        <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\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"bottomToTop\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/Images/common-orientation/bottomtotop.png\")'); margin: 0px 3px\">\n                        </div>\n                        <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\">\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"padding-top: 8px\">\n                        <div class=\"image-pattern-style\" id=\"rightToLeft\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/Images/common-orientation/righttoleft.png\")'); margin: 0px 3px\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row row-header\" style=\"padding-top: 10px\">\n                    Subtree Alignment\n                </div>\n                <div id=\"pattern\">\n                    <div class=\"row\" style=\"padding-top: 8px\">\n                        <div class=\"image-pattern-style\" id=\"pattern1\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_1.png\")'); margin-right: 3px\">\n                        </div>\n                        <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\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"pattern3\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_3.png\")'); margin: 0px 3px\">\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"padding-top: 8px\">\n                        <div class=\"image-pattern-style\" id=\"pattern4\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_4.png\")'); margin-right: 3px\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"pattern5\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_5.png\")'); margin: 0px 3px\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"pattern6\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_6.png\")'); margin: 0px 3px\">\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"padding-top: 8px\">\n                        <div class=\"image-pattern-style\" id=\"pattern7\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_7.png\")'); margin-right: 3px\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"pattern8\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_8.png\")'); margin: 0px 3px\">\n                        </div>\n                        <div class=\"image-pattern-style\" id=\"pattern9\" style=\"background-image:url('@Url.Content(\"~/Content/images/diagram/patternimages/Pattern_9.png\")'); margin: 0px 3px\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"row  property-panel-content\" style=\"padding-top: 10px\">\n            <div class=\"row row-header\">\n                Behavior\n            </div>\n            <div class=\"row\" style=\"padding-top: 8px\">\n                <div style=\"display: table;height: 35px;\" class=\"col-xs-6\">\n                    <div style=\"display: table-cell; vertical-align: middle\">Horizontal Spacing</div>\n                </div>\n                <div class=\"col-xs-6\">\n                    @Html.EJS().NumericTextBox(\"hSpacing\").Format(\"###.##\").Width(\"110px\").Change(\"hSpacingChange\").Min(20).Max(60).Step(2).Value(30).Render()\n                </div>\n            </div>\n            <div class=\"row\" style=\"padding-top: 8px\">\n                <div style=\"display: table;height: 35px;\" class=\"col-xs-6\">\n                    <div style=\"display: table-cell; vertical-align: middle\">Vertical Spacing</div>\n                </div>\n                <div class=\"col-xs-6\">\n                    @Html.EJS().NumericTextBox(\"vSpacing\").Format(\"###.##\").Width(\"110px\").Change(\"vSpacingChange\").Min(20).Max(60).Step(2).Value(30).Render()\n                </div>\n            </div>\n        </div>\n    </div>\n    <style>\n        #diagram {\n            display: block;\n        }\n        /* Css for images in property panel  */\n        .diagram-orgchart-panel .image-pattern-style {\n            background-color: white;\n            background-size: contain;\n            background-repeat: no-repeat;\n            height: 75px;\n            width: calc((100% - 18px) / 3);\n            cursor: pointer;\n            border: 1px solid #D5D5D5;\n            background-position: center;\n            float: left;\n        }\n\n        .diagram-orgchart-panel .image-pattern-style:hover {\n            border-color: gray;\n            border-width: 2px;\n        }\n        /* Property panel CSS */\n        .diagram-orgchart-panel .row {\n            margin-left: 0px;\n            margin-right: 0px;\n            display: block;\n        }\n\n        .diagram-orgchart-panel .row-header {\n            font-size: 13px;\n            font-weight: 500;\n        }\n\n        .diagram-orgchart-panel .row-header1 {\n            font-size: 12px;\n            padding-left: 2px;\n            font-weight: 400;\n        }\n\n\n        /* Selection indicator */\n        .diagram-orgchart-panel .e-selected-orientation-style {\n            border-color: #006CE6;\n            border-width: 2px;\n        }\n\n        .diagram-orgchart-panel .e-selected-pattern-style {\n            border-color: #006CE6;\n            border-width: 2px;\n        }\n\n        .diagram-orgchart-panel .col-xs-6 {\n            padding-left: 0px;\n            padding-right: 0px;\n        }\n    </style>\n\n    <script type=\"text/javascript\">\n\n        function create() {\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\n            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;\n            diagram.dataBind();\n        }\n\n        function hSpacingChange(args) {\n            var hSpacing = document.getElementById(\"hSpacing\");\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\n            diagram.layout.horizontalSpacing = Number(hSpacing.value);\n            diagram.dataBind();\n        }\n\n        function vSpacingChange(args) {\n            var vSpacing = document.getElementById(\"vSpacing\");\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\n            diagram.layout.verticalSpacing = Number(vSpacing.value);\n            diagram.dataBind();\n        }\n\n        var orien;\n        var typ;\n        //Click Event for orientation of the PropertyPanel.\n        document.getElementById('orientation').onclick = function (args) {\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\n            var target = args.target;\n            @*custom code start*@\n            var selectedElement = document.getElementsByClassName('e-selected-orientation-style');\n            if (selectedElement.length) {\n                selectedElement[0].classList.remove('e-selected-orientation-style');\n            }\n            if (!target.classList.contains('e-selected-orientation-style')) {\n                target.classList.add('e-selected-orientation-style');\n            }\n            @*custom code end*@\n            if (target.className === 'image-pattern-style e-selected-orientation-style') {\n                var id = target.id;\n                var orientation1 = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n                diagram.layout.orientation = orientation1;\n                diagram.dataBind();\n                diagram.doLayout();\n            }\n        };\n        //Click Event for pattern of the PropertyPanel.\n        document.getElementById('pattern').onclick = function (args) {\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\n            var target = args.target;\n            @*custom code start*@\n            var selectedpatternElement = document.getElementsByClassName('e-selected-pattern-style');\n            if (selectedpatternElement.length) {\n                selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n            }\n            if (!target.classList.contains('e-selected-pattern-style')) {\n                target.classList.add('e-selected-pattern-style');\n            }\n            @*custom code end*@\n            if (target.className === 'image-pattern-style e-selected-pattern-style') {\n                var subTreeOrientation;\n                var subTreeAlignment;\n                switch (target.id) {\n                    case 'pattern1':\n                        subTreeOrientation = 'Vertical';\n                        subTreeAlignment = 'Alternate';\n                        break;\n                    case 'pattern2':\n                        subTreeOrientation = 'Vertical';\n                        subTreeAlignment = 'Left';\n                        break;\n                    case 'pattern3':\n                        subTreeOrientation = 'Vertical';\n                        subTreeAlignment = 'Left';\n                        break;\n                    case 'pattern4':\n                        subTreeOrientation = 'Vertical';\n                        subTreeAlignment = 'Right';\n                        break;\n                    case 'pattern5':\n                        subTreeOrientation = 'Vertical';\n                        subTreeAlignment = 'Right';\n                        break;\n                    case 'pattern6':\n                        subTreeOrientation = 'Horizontal';\n                        subTreeAlignment = 'Balanced';\n                        break;\n                    case 'pattern7':\n                        subTreeOrientation = 'Horizontal';\n                        subTreeAlignment = 'Center';\n                        break;\n                    case 'pattern8':\n                        subTreeOrientation = 'Horizontal';\n                        subTreeAlignment = 'Left';\n                        break;\n                    case 'pattern9':\n                        subTreeOrientation = 'Horizontal';\n                        subTreeAlignment = 'Right';\n                        break;\n                    default:\n                        if (selectedpatternElement.length) {\n                            selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n                        }\n                }\n                diagram.layout.getLayoutInfo = function (node, options) {\n                    if (target.id === 'pattern4' || target.id === 'pattern3') {\n                        options.offset = -50;\n                    }\n                    if (node.data.Role === 'General Manager') {\n                        options.assistants.push(options.children[0]);\n                        options.children.splice(0, 1);\n                    }\n                    if (!options.hasSubTree) {\n                        options.orientation = subTreeOrientation;\n                        options.type = subTreeAlignment;\n                    }\n                };\n                diagram.dataBind();\n                diagram.doLayout();\n            }\n        };\n\n        function getLayoutInfo(node, options, orientation, type) {\n            if (node.data.Role === 'General Manager') {\n                options.assistants.push(options.children[0]);\n                options.children.splice(0, 1);\n            }\n            if (!options.hasSubTree) {\n                options.type = 'Right';\n            }\n        }\n\n        function nodeDefaults(obj, diagram) {\n            obj.shape = {\n                type: 'Text', content: obj.data.Role,\n                margin: { left: 10, right: 10, top: 10, bottom: 10 }\n            };\n            obj.backgroundColor = obj.data.Color;\n            obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };\n            obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };\n            obj.expandIcon.verticalAlignment = 'Center';\n            obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n            obj.collapseIcon.offset = { x: .5, y: 1 };\n            obj.collapseIcon.verticalAlignment = 'Center';\n            obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n            obj.collapseIcon.height = 10;\n            obj.collapseIcon.width = 10;\n            obj.collapseIcon.shape = 'None';\n            obj.collapseIcon.fill = 'lightgray';\n            obj.width = 120;\n            obj.height = 30;\n            return obj;\n        }\n\n        function connectorDefaults(connector, diagram) {\n            connector.targetDecorator.shape = 'None';\n            connector.type = 'Orthogonal';\n            connector.constraints = 0;\n            connector.cornerRadius = 0;\n            return connector;\n        }\n    </script>\n}\n"
    },
    {
      "target": "src/components/diagram-organization-chart/OrganizationalChartLayoutController.cs",
      "content": "using EJ2MVCSampleBrowser.Models;\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Web;\nusing System.Web.Mvc;\n\nnamespace EJ2MVCSampleBrowser.Controllers.Diagram\n{\n    public partial class DiagramController : Controller\n    {\n        // GET: HierarchicalLayout\n        public ActionResult OrganizationalChartLayout()\n        {\n            ViewData[\"Nodes\"] = OrganizationalDetails.GetAllRecords();\n            return View();\n        }\n    }\n}"
    }
  ]
}