GanttChart Task Tree

Task Tree

Smart GanttChart's uses a Tree component to display the tasks of the element. There are two types of items determined by their hierarchy that the element is using:

  • Tree Item - represent a Task/Milestone. As such it doesn't allow nested items.
  • Tree Item Group - represent a Project. Allows nested items - subTasks of a Project. When the user clicks on the arrow infront of an Item Group in the Task Tree. If it has subTasks it will expand in order to view all the tasks that belong to the project or collapse to hide them. Collapsing/Expanding reflects on the Timeline as well.

Expanding/Collapsing the project affects the Timeline as well.

The columns of the Task Tree are determined by the taskColumns property. This property represents an Array of objects. Each object defines a column with the follkowing properties:

  • label - determines the text that will appear as the header of the column. The label property can be used in conjunction with messages in order to provide quick localization. Here's an example:
    const ganttChart = document.querySelector('jqx-gantt-chart');
    
    gantt.taskColumns = [
            {
                label: 'columnLabel',
                value: 'label',
                size: '60%'
            }
            ...
    ];
    
    gantt.messages = {
            'en': {
                ...
                'columnLabel': 'Task Name'
                ...
            },
            'de': {
                ...
                'columnLabel': 'Aufgabennname',
                ...
            },
    

    Note: The demo used in this section is available on the website: Link

  • value - Determines the content of the Tree items that will be created for each task. The value should match a task property, e.g. dateStart, dateEnd, label, duration, etc. If it doesn't the column will still be created but the tree items will not be populated with content. This can be used to create a column with custom content using the formatFunction.
  • size - determines the size of the column. The size can be in in percentages or pixels.
  • min - determines the minimal size of the column. The size can be in in percentages or pixels.
  • max - determines the maximal size of the column. The size can be in in percentages or pixels.
  • formatFunction - a callback that determines the content of the Tree items that will be created for each task. Can be used to completely customize the content. The function accepts one argument - the value of the property determined by the value attribute defined earlier of the each Task.
    ...
     ganttChart.taskColumns = [
          {
                ...
    
                //Custom format function
                formatFunction: function (label) {
                    if (label === 'Learn') {
                        return ' <i class="material-icons">&#xE80C;</i>' + label;
                    }
                    else if (label === 'Work') {
                        return ' <i class="material-icons">&#xE30A;</i>' + label;
                    }
                    else if (label === 'Travel') {
                        return ' <i class="material-icons">&#xE53D;</i>' + label;
                    }
                    else if (label === 'Eat') {
                        return ' <i class="material-icons">&#xE56C;</i>' + label;
                    }
                    else if (label === 'Shop') {
                        return ' <i class="material-icons">&#xE25C;</i>' + label;
                    }
                    else if (label === 'Train') {
                        return ' <i class="material-icons">&#xE52F;</i>' + label;
                    }
                    else {
                        return label;
                    }
                }
            }
            ...
    ];
                             
  • root - a boolean flag that determines whether the column will be the root column or not. The root column contains the Tree groups with expand/collapse buttons.

Note: The demo used in this section is available on the website: Link

Task Tree Size

By default the GanttChart is devided in two components - Task Tree and Timeline. So it's necessary to control the size of the Task Tree. The following properties are available:
  • treeMin - Sets the minimal size of the Task Tree. The size can be in percentages or pixels.
  • treeSize - Sets the size of the Task Tree. By default it's set to '20%'.
...
ganttChart.treeMin = '10%';
ganttChart.treeSize = '20%';
...

By settings the size of the Task tree to '20%' what's left of the width of the GanttChart will be used to visualize the Timeline.

Keyboard Navigation

Keyboard navigation inside the Task Editor is enabled by default when the element is focused.
Key Action
ArrowUp/ArrowDown Pressing the 'ArrowUp/ArrowDown' keys focuses the previous/next task in the tree.
Space Pressing 'Space' key will select/unselect the focused task.