Customizations

7 Jun 202315 minutes to read

Gantt provides support for the following UI customizations,

  • Taskbar template
  • Task label template
  • Tooltip template

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 JsRender script or script element’s ID to this property. It is also possible to customize the parent taskbars and milestones with custom templates by using parentTaskbarTemplate and milestoneTemplate properties.

The following code example shows how to define template for taskbars in Gantt.

  • HTML
  • <div id="GanttContainer" style="height:450px;width:100%;" />
  • JAVASCRIPT
  • <script type="text/x-jsrender" id="taskbarTemplate">
    
        <div class="e-gantt-template-taskbar bg-color">
    
            <div>
    
                //…
    
            </div>
    
            <div class="e-gantt-template-progressbar">
    
            </div>
    
        </div>
    
    </script>
    
    <script type="text/x-jsrender" id="parentTaskbarTemplate">
    
        <div class="e-gantt-template-taskbar">
    
            //…
    
            <div class="e-gantt-template-progressbar">
    
            </div>
    
        </div>
    
    </script>
    
    <script type="text/x-jsrender" id="milestoneTemplate">
    
        <div class="e-gantt-template-milestone" style="background-color:transparent;">
    
            <div class="e-gantt-milestone milestone-top"></div>
    
            <div class="e-gantt-milestone milestone-bottom"></div>
    
        </div>
    
    </script>
    
    <script>
        $(function() {
    
            $("#GanttContainer").ejGantt({
    
                //…
    
                taskbarTemplate: "#taskbarTemplate",
    
                parentTaskbarTemplate: "#parentTaskbarTemplate",
    
                milestoneTemplate: "#milestoneTemplate",
    
            });
    
        });
    </script>

    The DOM structure and class names mentioned in the above code snippet is mandatory for providing the editing support in custom templates.

    Click here to view the online demo sample for Taskbar templates in Gantt.

    The following screenshot shows the template for taskbars in Gantt.

    Task label template

    By default, task name will be displayed to the left and resource names will be displayed to the right of the taskbars as task labels. We can enable/disable this default task labels by using showTaskNames and showResourceNames properties. But these task labels are customizable.

    Mapping data source fields as task labels

    It is also possible to set any data source fields as task labels using rightTaskLabelMapping and leftTaskLabelMapping properties.

    The following code example explains how to set task name field as right label and task ID field as left label,

  • JAVASCRIPT
  • $(function() {
    
            $("#GanttContainer").ejGantt({
    
                //...
    
                rightTaskLabelMapping: "taskName",
    
                leftTaskLabelMapping: "taskID",
    
            });
    
        });

    The following screenshot shows Gantt with task labels mapped with different data source fields

    Task label templates

    It is possible to customize the task labels with templates, by using rightTaskLabelTemplate and leftTaskLabelTemplate properties.

    The following code example explains how to map custom templates to task labels.

  • HTML
  • <div id="GanttContainer" style="width:100%;height:450px;" />
  • JAVASCRIPT
  • <script id="rightLabelTemplate" type="text/x-jsrender">
    
        {{if #data['resourceNames']}}
    
        <div>
    
            {{for resourceInfo}}
    
            <img src="14.2.0.26/themes/web/content/images/gantt/{{:resourceName}}.png" height="30px" />
    
            <span style="margin-left:5px;">{{:resourceName}}</span> {{:~_getSeparator(#get("array").data.length,#index)}} {{/for}}
    
        </div>
    
        
    
    </script>
    
    <script id="leftLabelTemplate" type="text/x-jsrender">
    
        <div style="padding-top:5px;">
    
            <span>{{:#data['taskName']}}  [{{:status}}%]</span>
    
        </div>
    
    </script>
    
    <script>
        $(function() {
    
            $("#GanttContainer").ejGantt({
    
                //...
    
                rightTaskLabelTemplate: "#rightLabelTemplate",
    
                leftTaskLabelTemplate: "#leftLabelTemplate",
    
            });
    
        });
    </script>

    You can find the online demo sample for task label templates in Gantt here

    The following screenshot shows Gantt with task label templates.

    Tooltip template

    Taskbar tooltip

    The default tooltip in Gantt can be customized by using the taskbarTooltipTemplateId property. We need to map the JsRender script element’s ID value to this property.

    The following code example shows how to customize the tooltip.

  • HTML
  • <div id="GanttContainer" style="width:100%;height:450px;" />
  • JAVASCRIPT
  • <script type="text/x-jsrender" id="tooltipTemplate">
    
        <table>
    
           {{if #data['resourceNames']}}
    
            <tr>
    
                <td rowspan="3" style="padding:3px"><img src="14.2.0.26/themes/web/content/images/gantt/{{:#data['resourceNames']}}.png" height="40px" /></td>
    
                <td style="padding:3px"><b>Task done By:</b></td>
    
                <td style="padding:3px">{{:#data['resourceNames']}}</td>
    
            </tr>
    
            }}
    
            <tr>
    
                <td style="padding:3px"><b>Starts On:</b></td>
    
                <td style="padding:3px">{{:~_ganttDateFormatter("startDate")}}</td>
    
            </tr>
    
            <tr>
    
                <td style="padding:3px"><b>Ends On:</b></td>
    
                <td style="padding:3px">{{:~_ganttDateFormatter("endDate")}}</td>
    
            </tr>
    
        </table>
    
    </script>
    
    $(function () { $("#GanttContainer").ejGantt({ //… taskbarTooltipTemplateId: "tooltipTemplate",  });
    
    </script>

    The following screenshot shows Gantt with task tooltip customization.

    Dependency tooltip

    The default dependency tooltip in Gantt can be customized by using predecessorTooltipTemplate property. We can map value to this property as JsRender template script id with prefix of ‘#’ or HTML elements in string format. The following code example shows how to use the predecessorTooltipTemplate property.

  • JAVASCRIPT
  • <script type="text/javascript">
        $("#GanttContainer").ejGantt({
            //...
            enableTaskbarTooltip: true,
            predecessorTooltipTemplate: "#ToolTipTemplate",
        })
    
        $.views.helpers({
            _Type: getType,
            _Lag: getLag
        });
    
        function getType() {
            return this.data.linkText;
        }
    
        function getLag() {
            return this.data.offset + " " + this.data.offsetUnit;        
        }
    </script>
    
    <script id="ToolTipTemplate" type="text/x-jsrender">
    
        <table>
                <tr>
                    <td><b>Type:</b></td>
                    <td><i></i></td>
                </tr>
                <tr>
                    <td><b>Lag:</b></td>
                    <td><i></i></td>
                </tr>
        </table>
    
    </script>

    The following screenshot show the output of above code example.

    You can find the JS playground sample for dependency tooltip template here.

    Cell tooltip

    TreeGrid part tooltip can also be customized using cellTooltipTemplate property. We need to map the script element or element id to this property. The following code explains how to customize the cell tooltip in Gantt.

  • JAVASCRIPT
  • <script type="text/javascript">
        $("#GanttContainer").ejGantt({
    
            //...
    
            showGridCellTooltip: true,
    
            cellTooltipTemplate: "#CustomToolTip",
    
        })
    
        $.views.helpers({
            _TaskID: getTaskID,
            _TaskName: getTaskName
        });
    
        function getTaskID() {
    
            return this.data.record["taskId"];
    
        }
    
        function getTaskName() {
    
            return this.data.record["taskName"];
    
        }
    </script>
    
    <script id="CustomToolTip" type="text/x-jsrender">
    
        <table>
    
            <tr>
    
                <td>Id:</td>
    
                <td>{{:~_TaskID()}}</td>
    
            </tr>
    
            <tr>
    
                <td>Name:</td>
    
                <td>{{:~_TaskName()}}</td>
    
            </tr>
    
        </table>
    
    </script>

    You can find the online demo sample for tooltip templates for taskbars here

    Taskbar Editing Tooltip

    Editing tooltip is used to show the updated start date, end date, duration and progress values of a task while resizing, dragging and progress bar resizing actions. Currently two editing tooltips are available in Gantt.

    • Taskbar editing tooltip
    • Progress bar editing tooltip

    We can customize the default taskbar editing tooltip and progress bar editing tooltip in Gantt.

    Customize taskbar editing tooltip

    Taskbar editing tooltip can be customized by using taskbarEditingTooltipTemplate and taskbarEditingTooltipTemplateId properties. The below code example shows how to customize the taskbar editing tooltip in Gantt.

  • JAVASCRIPT
  • <script id="taskbar_editing_tooltip_template" type="text/x-jsrender">
        <table>
            <tr>
                <td colspan="2" style="padding:3px;font-weight:bold;font-style:italic"></td>
            </tr>
            <tr>
                <td style="padding:3px;font-weight:bold">Start Date</td>
                <td style="padding:3px"></td>
            </tr>
            <tr>
                <td style="padding:3px;font-weight:bold">End Date</td>
                <td style="padding:3px"></td>
            </tr>
            <tr>
                <td style="padding:3px;font-weight:bold">Duration</td>
                <td style="padding:3px"> </td>
            </tr>
        </table>
    </script>
    <script>
        $.views.helpers({
                getStartDate: function () {
                    return ej.format(this.data.startDate, "MM/dd/yyyy", "en-US");
                },
                getEndDate: function () {
                    return ej.format(this.data.endDate, "MM/dd/yyyy", "en-US");
                }
            });
    
        $(function() {
            $("#GanttContainer").ejGantt({
                //...
                taskbarEditingTooltipTemplateId: "taskbar_editing_tooltip_template",
            });
        });
    </script>

    The below screenshot shows the output of above code example.

    You can find the JS playground sample for this property here.

    Customize progress bar editing tooltip

    Progress bar editing tooltip can be customized by using progressbarTooltipTemplate and progressbarTooltipTemplateId properties. The below code example shows how to customize the progress bar editing tooltip in Gantt.

  • JAVASCRIPT
  • <script id="progressbar_editing_tooltip_template" type="text/x-jsrender">
        <table>
            <tr>
                <td colspan="2" style="padding:3px;font-weight:bold;font-style:italic"></td>
            </tr>
            <tr>
                <td style="padding:3px;font-weight:bold">Task Status</td>
                <td style="padding:3px">%</td>
            </tr>
        </table>
    </script>
    <script>
        $(function() {
            $("#GanttContainer").ejGantt({
                //...
                progressbarTooltipTemplateId: "progressbar_editing_tooltip_template",
            });
        });
    </script>

    The below screenshot shows the output of above code example.

    You can find the JS playground sample for this property here.