How to use HTML Templates and CSS in the organization chart using the HTML node in JS Diagram?
This article explains how to use HTML Templates and CSS in the organization chart using the HTML node in JS Diagram. An organizational chart is a diagram that displays the structure of an organization and its relationships. To create an organizational chart, the type of layout should be set as an `OrganizationalChart`.
The HTML template has been created with the help of the shape property. In that shape property, the type must be assigned as "HTML" and the content attribute is used to describe the width, background-color, height, and border of the nodes. We have used this customization in the below Organization.js. Please refer to it for more information.
The following code example illustrates how to use HTML Templates and CSS in the organization chart by using the HTML node in JavaScript Diagram
Organization.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;
}
}
}
}
Organiztion.cshtml
The following code-snippet illustrate that HTML rendering of the organizational chart with help of a datasource and layout property.
<div class="col-lg-12 control-section">
<div class="content-wrapper">
@(Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults")
.GetConnectorDefaults("getConnectorDefaults")
.ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Diagram))
.DataSourceSettings(ss => ss.Id("Id").ParentId("ReportingPerson")
.DataSource(new DataManager()
{
Data = ViewBag.Nodes
}))
.Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.OrganizationalChart).GetLayoutInfo("getLayoutInfo"))
.SnapSettings(se => se.Constraints(Syncfusion.EJ2.Diagrams.SnapConstraints.None))
.Render())
</div>
</div>
Organization.js
The following code snippet illustrates how to create HTML template nodes and the default functionality for each connector.
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;
}
Refer to the working sample for additional details and implementation: link here.
For more information about Automatic layout, please refer to our documentation.
Conclusion
We hope you enjoyed learning on how to use HTML Templates and CSS in JS Diagram.
You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
