HTML Template and CSS in the Organization chart

3 Jan 202310 minutes to read

An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the type of layout should be set as an OrganizationalChart.

CustomizedOrganization.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Syncfusion.EJ2.Diagrams;



namespace organization.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            ViewBag.Nodes = OverviewData.GetAllRecords();
            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, string Image)
            {
                this.Id = id;
                this.Name = name;
                this.Designation = designation;
                this.ReportingPerson = reportingperson;
                this.Image = Image;
            }

            public static List<OverviewData> GetAllRecords()
            {
                List<OverviewData> data = new List<OverviewData>();
                data.Add(new OverviewData("parent", "Maria Anders", "Managing Director", "", "./assets/diagram/employees/image1.png"));
                data.Add(new OverviewData("1", "Ana Trujillo", "Project Manager", "parent", "./assets/diagram/employees/image2.png"));
                data.Add(new OverviewData("2", "Anto Moreno", "Project Lead", "1", "./assets/diagram/employees/image3.png"));
                data.Add(new OverviewData("3", "Thomas Hardy", "Senior S/w Engg", "2", "./assets/diagram/employees/image4.png"));
                data.Add(new OverviewData("4", "Christina kaff", "S/w Engg", "3", "./assets/diagram/employees/image5.png"));
                data.Add(new OverviewData("5", "Hanna Moos", "Project Trainee", "4", "./assets/diagram/employees/image6.png"));
                data.Add(new OverviewData("6", "Peter Citeaux", "S/w Engg", "5", "./assets/diagram/employees/image7.png"));
                data.Add(new OverviewData("7", "Martín Kloss", "Project Trainee", "6", "./assets/diagram/employees/image8.png"));
                data.Add(new OverviewData("8", "Elizabeth Mary", "Project Trainee", "6", "./assets/diagram/employees/image9.png"));
                data.Add(new OverviewData("9", "Victoria Ash", "Senior S/w Engg", "5", "./assets/diagram/employees/image10.png"));
                data.Add(new OverviewData("10", "Francisco Yang", "Senior S/w Engg", "3", "./assets/diagram/employees/image11.png"));
                data.Add(new OverviewData("11", "Yang Wang", "Project Manager", "parent", "./assets/diagram/employees/image12.png"));
                data.Add(new OverviewData("12", "Lino Rodri", "Project Manager", "11", "./assets/diagram/employees/image13.png"));
                data.Add(new OverviewData("13", "Philip Cramer", "Senior S/w Engg", "24", "./assets/diagram/employees/image14.png"));
                data.Add(new OverviewData("14", "Pedro Afonso", "Project Trainee", "15", "./assets/diagram/employees/image15.png"));
                data.Add(new OverviewData("15", "Elizabeth Roel", "S/w Engg", "13", "./assets/diagram/employees/image16.png"));
                data.Add(new OverviewData("16", "Janine Labrune", "Project Lead", "12", "./assets/diagram/employees/image17.png"));
                data.Add(new OverviewData("17", "Ann Devon", "Project Manager", "25", "./assets/diagram/employees/image18.png"));
                data.Add(new OverviewData("18", "Roland Mendel", "Project Lead", "17", "./assets/diagram/employees/image19.png"));
                data.Add(new OverviewData("19", "Aria Cruz", "Senior S/w Engg", "18", "./assets/diagram/employees/image20.png"));
                data.Add(new OverviewData("20", "Martine Rancé", "S/w Engg", "18", "./assets/diagram/employees/image21.png"));
                
                return data;
            }
        }
    }
}

        function getLayoutInfo(node, tree) {
            if (!tree.hasSubTree) {
                tree.orientation = 'Vertical';
                tree.type = 'Right';
            }
        }
        function getNodeDefaults(obj, diagram) {
            obj.height = 100;
            obj.width = 250;
            obj.style = { fill: 'transparent', strokeWidth: 2 };
            obj.shape = {
                type: 'HTML',
                content:
                    `<div><div style=" width: 250px;background-color: #6BA5D7;height:100px; border: 2px solid darkblue; "><img src="https://ej2.syncfusion.com/angular/demos/` +
                    (obj.data).Image.replace('./', '') +
                    `"   style="width: 100px;height: 100px;border-radius: 50%;background-color: whitesmoke "/></div><div style=" margin-left: 125px; margin-top: -74px; font-size: 15px;">` +
                    (obj.data).Name +
                    `</div><div style=" margin-left: 125px; margin-top: 20px; font-size: 15px;">` +
                    (obj.data).Designation +
                    `</div></div>`
            };
        }
        function getConnectorDefaults(connector, diagram) {
            connector.targetDecorator.shape = 'None';
            connector.type = 'Orthogonal';
            connector.style.strokeColor = 'gray';
            return connector;
        }