Appearance customization

21 Dec 202224 minutes to read

Taskbar customization

Taskbar Height

Height of child taskbars and parent taskbars can be customized by using TaskbarHeight property. The following code example shows how to use the property.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").RowHeight(60).TaskbarHeight(
                50).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
                        "Duration").Progress("Progress").Child("SubTasks")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

NOTE

The TaskbarHeight value should be lower than the RowHeight property value and these properties accept only pixel values.

Conditional formatting

The default taskbar UI can be replaced with custom templates using the QueryTaskbarInfo event. The following code example shows customizing the taskbar UI based on task progress values in the Gantt control.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").QueryTaskbarInfo("queryTaskbarInfo").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
       <script>
		function queryTaskbarInfo(args) {
            if (args.data.Progress == 50) {
                args.progressBarBgColor = "red";
            } else if (args.data.Progress == 70) {
                args.progressBarBgColor = "yellow";
            } else if (args.data.Progress == 80) {
                args.progressBarBgColor = "lightgreen";
            }
        }
       </script>
public IActionResult Index()
{
   ViewBag.DataSource = ganttData();
      return View();
}

 public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,

            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50

            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>()
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70
            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 50
            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }

        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
        }

Alt text

Taskbar template

You can design your own taskbars to view the tasks in Gantt by using TaskbarTemplate property. And it is possible to map the template script element’s ID value to this property. It is also possible to customize the parent taskbars and milestones with custom templates by using ParentTaskbarTemplate and MilestoneTemplate properties.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").RowHeight(60).TaskbarTemplate(
            "#TaskbarTemplate").ParentTaskbarTemplate("#ParentTaskbarTemplate").MilestoneTemplate("#MilestoneTemplate").TaskFields(ts =>
             ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
             ).Render()
				
    <script type="text/x-jsrender" id="TaskbarTemplate">
        <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:100%">
            <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
                <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: " Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
            </div>
        </div>
    </script>

    <script type="text/x-jsrender" id="ParentTaskbarTemplate">
        <div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
            <div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
                <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: " Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
            </div>
        </div>
    </script>

    <script type="text/x-jsrender" id="MilestoneTemplate">
        <div class="e-gantt-milestone" style="position:absolute;">
            <div class="e-milestone-top" style="border-right-width:15px;border-left-width:15px;border-bottom-width:15px;"></div>
            <div class="e-milestone-bottom" style="top:15px;border-right-width:15px; border-left-width:15px; border-top-width:15px;">
            </div>
        </div>
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Change gripper icon in taskbar

You can change the gripper icon in the taskbar by applying styles to their respective class elements.

@model List<GanttSample.Controllers.GanttDataSource>

@Html.EJS().Gantt("Editing").DataSource((IEnumerable<object>)Model).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate(
      "StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Dependency("Predecessor").Child("SubTasks")).EditSettings(es =>
       es.AllowTaskbarEditing(true)).Render()

<style>
/* change gripper icon */
.e-gantt .e-left-resize-gripper::before, .e-gantt .e-right-resize-gripper::before {
    content: '\e934';
}

.e-gantt .e-left-resize-gripper, .e-gantt .e-right-resize-gripper {
    transform: rotate(90deg);
}
</style>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Change Gripper Icon in Taskbar

Task labels

The Gantt control maps any data source fields to task labels using the LabelSettings.LeftLabel, LabelSettings.RightLabel, and LabelSettings.TaskLabel properties. You can customize the task labels with templates.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
      "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).LabelSettings(ls =>
       ls.LeftLabel("TaskId").RightLabel("Task Name: ${taskData.TaskName}").TaskLabel("${Progress}%")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Connector lines

The width and background color of connector lines in Gantt can be customized using the ConnectorLineWidth and ConnectorLineBackground properties. The following code example shows how to use these properties.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").ConnectorLineWidth(3).ConnectorLineBackground("red").TaskFields(ts => 
        ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks").Dependency("Dependency")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = ganttData();
    return View();
}

public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,

            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50

            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Dependency="3FS"
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>()
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70
            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 50,
                Dependency = "6SS"
            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }

        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
        }

Alt text

Customize rows and cells

While rendering the TreeGrid part in Gantt, the RowDataBound and QueryCellInfo events trigger for every row and cell. Using these events, you can customize the rows and cells. The following code example shows how to customize the cell and row elements using these events.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").QueryCellInfo("queryCellInfo").RowDataBound("rowDataBound").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
        
	  <script>
        function queryCellInfo(args) {
            if (args.column.field == "Progress") {
                if (args.data.Progress < 60)
                    args.cell.style.backgroundColor = "lightgreen"
                else
                    args.cell.style.backgroundColor = "yellow"
            }
        }
        function rowDataBound(args) {
            if (args.data.TaskId == 4)
                args.row.style.backgroundColor = "red"
        }
      </script>
public IActionResult Index()
{
    ViewBag.DataSource = ganttData();
    return View();
}
public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,

            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50

            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>()
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70
            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 50
            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }

        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
        }

Alt text

Grid lines

In the Gantt control, you can show or hide the grid lines in the TreeGrid side and chart side by using the GridLines property.

The following options are available in the Gantt control for rendering the grid lines:

  • Horizontal: The horizontal grid lines alone will be visible.
  • Vertical: The vertical grid lines alone will be visible.
  • Both: Both the horizontal and vertical grid lines will be visible on the TreeGrid and chart sides.
  • None: Gridlines will not be visible on TreeGrid and chart sides.

NOTE

By default, the GridLines property is set to Horizontal type.

The following code example shows how to change the gridlines rendering mode in the Gantt control.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").GridLines(
                Syncfusion.EJ2.Gantt.GridLine.Both).TaskFields(ts =>ts.Id("TaskId").Name("TaskName").StartDate(
                        "StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Splitter

In the Gantt control, the Splitter separates the TreeGrid section from the Chart section. You can change the position of the Splitter when loading the Gantt control using the SplitterSettings property. By splitting the TreeGrid from the chart, the width of the TreeGrid and chart sections will vary in the control. The SplitterSettings.Position property denotes the percentage of the TreeGrid section’s width to be rendered and this property supports both pixels and percentage values. You can define the splitter position as column index value using the SplitterSettings.ColumnIndex property. You can also define the splitter position with built-in splitter view modes by using the SplitterSettings.View property. The following list is the possible values for this property:

  • Default: Shows Grid side and Gantt side.
  • Grid: Shows Grid side alone in Gantt.
  • Chart: Shows chart side alone in Gantt.
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
             ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
             ).SplitterSettings(ss=>ss.Position("80%")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Change splitter position dynamically

In Gantt, we can change the splitter position dynamically by using setSplitterPosition method. We can change the splitter position by passing value and type parameter to setSplitterPosition method. Type parameter will accept one of the following values ‘position’, ‘columnIndex’, ‘viewType’. The following code example shows how to use this method.

@Html.EJS().DropDownList("SplitterView").DataSource((IEnumerable<object>)ViewBag.dropdata).Width("250px").Value("Default").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "id", Value = "view" }).Change("onViewChange").Render()
    @Html.EJS().Button("changeByPosition").Content("Change Splitter By Position").CssClass("e-primary").Render()
    @Html.EJS().Button("changeByIndex").Content("Change Splitter By ColumnIndex").CssClass("e-primary").Render()
    @(Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
     ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
     ).Render())
				
	<script>
	 function onViewChange(e) {
            var viewType = e.value;
            var ganttObj = document.getElementById("Gantt").ej2_instances[0];
            ganttObj.setSplitterPosition(viewType, 'view');
        }
		
        document.getElementById("changeByPosition").addEventListener('click', () => {
            var ganttObj = document.getElementById("Gantt").ej2_instances[0];
            ganttObj.setSplitterPosition('50%', 'position');
        });

        document.getElementById("changeByIndex").addEventListener('click', () => {
            var ganttObj = document.getElementById("Gantt").ej2_instances[0];
            ganttObj.setSplitterPosition(0, 'columnIndex');
        });
	</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    ViewBag.dropdata = new List<object>() {
               new { id= "Default", view= "Default" },
               new { id= "Grid", view= "Grid" },
               new { id= "Chart", view= "Chart" }
            };
    return View();
}