{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-local-data",
  "framework": "aspnet-core",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "local-data",
  "dependencies": [
    "Syncfusion.AspNetCore.Diagram"
  ],
  "description": "Hierarchical tree diagram bound to a local Species/Plants/Animals JSON list.",
  "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/aspnet-core/llms.txt",
    "skillPack": "syncfusion/aspnetcore-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-core/diagram-local-data.md"
  },
  "files": [
    {
      "target": "src/components/diagram-local-data/diagram.cshtml",
      "content": "@page\r\n@model EJ2CoreSampleBrowser.Pages.Diagram.LocalDataModel\r\n@using Syncfusion.EJ2;\r\n\r\n@{\r\n    var getNodeDefaults = \"getNodeDefaults\";\r\n    var getConnectorDefaults = \"getConnectorDefaults\";\r\n}\r\n\r\n    <div class=\"control-section\">\r\n        <ejs-diagram id=\"diagram\" width=\"100%\" height=\"550px\" getNodeDefaults=\"@getNodeDefaults\" getConnectorDefaults=\"@getConnectorDefaults\" created=\"diagramCreated\">\r\n            <e-diagram-snapsettings constraints=\"None\"></e-diagram-snapsettings>\r\n            <e-diagram-datasourcesettings id=\"Name\" parentId=\"Category\" dataSource=\"new DataManager(){ Data = (List<EJ2CoreSampleBrowser.Pages.Diagram.LocalDataDetails>)@Model.localData }\"></e-diagram-datasourcesettings>\r\n            <e-diagram-layout type=\"HierarchicalTree\" horizontalSpacing=\"15\" verticalSpacing=\"50\"></e-diagram-layout>\r\n        </ejs-diagram>\r\n    </div>\r\n\r\n    <script>\r\n        function diagramCreated() {\r\n            var diagram = document.getElementById(\"diagram\").ej2_instances[0];\r\n            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;\r\n            diagram.dataBind();\r\n            diagram.fitToPage();\r\n        }\r\n\r\n        function getNodeDefaults(obj, data, diagram) {\r\n            //Initialize shape\r\n            obj.annotations = [{\r\n                /* tslint:disable:no-string-literal */\r\n                content: obj.data.Name, style: { color: 'black' }\r\n            }];\r\n            obj.style =\r\n\r\n                {\r\n                    fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1\r\n                }\r\n\r\n                ; obj.shape = {\r\n                    type: 'Basic', shape: 'Rectangle'\r\n                }\r\n\r\n                ; obj.width = 95; obj.height = 30; return obj;\r\n        }\r\n\r\n        function getConnectorDefaults(connector, diagram) {\r\n            connector.type = 'Orthogonal';\r\n            connector.style.strokeColor = '#4d4d4d';\r\n            connector.targetDecorator.shape = 'None';\r\n            return connector;\r\n        }\r\n\r\n    </script>"
    },
    {
      "target": "src/components/diagram-local-data/diagram.cshtml.cs",
      "content": "using Microsoft.AspNetCore.Mvc.RazorPages;\r\n\r\nnamespace EJ2CoreSampleBrowser.Pages.Diagram;\r\n\r\npublic class LocalDataModel : PageModel\r\n{\r\n    public List<LocalDataDetails> localData { get; set; }\r\n    public void OnGet()\r\n    {\r\n        localData = new List<LocalDataDetails>();\r\n        localData.Add(new LocalDataDetails(\"Species\", \"\"));\r\n        localData.Add(new LocalDataDetails(\"Plants\", \"Species\"));\r\n        localData.Add(new LocalDataDetails(\"Animals\", \"Species\"));\r\n        localData.Add(new LocalDataDetails(\"Vertebrates\", \"Animals\"));\r\n    }\r\n}\r\npublic class LocalDataDetails\r\n{\r\n    public string Name { get; set; }\r\n    public string Category { get; set; }\r\n        \r\n\r\n    public LocalDataDetails(string id, string category)\r\n    {\r\n        this.Name = id;\r\n        this.Category = category;            \r\n    }\r\n}"
    }
  ]
}