How to implement stacked headers in the Angular Gantt Chart?

By default, the Angular Gantt Chart does not support stacked headers or multi-level headers. However, you can achieve this functionality by accessing the underlying DataGrid component instance through the Gantt chart reference and customizing its column structure.

Why Use Stacked Headers?

Stacked headers allow you to group related columns under a common header, improving readability and organization in complex Gantt Charts.

Steps to Configure

1. Set up the Gantt Chart with the created Event

Initialize the Gantt Chart component and bind the created event to customize columns before rendering.

<ejs-gantt #gantt (created)="created()" [dataSource]="data" [taskFields]="taskSettings">
</ejs-gantt>

2. Define Group Columns and Sub-Columns

Create arrays for group headers and sub-columns to structure stacked headers.

// Define group headers
public Groupcolumns: any[] = [
  { headerText: 'Task Details', textAlign: 'Center' },
  { headerText: 'Schedule', textAlign: 'Center' }
];

// Define sub-columns
public columns: any[] = [
  { field: 'TaskID', headerText: 'ID', width: '80' },
  { field: 'TaskName', headerText: 'Name', width: '150' },
  { field: 'StartDate', headerText: 'Start Date', width: '120' },
  { field: 'EndDate', headerText: 'End Date', width: '120' },
  { field: 'Duration', headerText: 'Duration', width: '100' },
  { field: 'Progress', headerText: 'Progress', width: '100' },
  { field: 'Predecessor', headerText: 'Predecessor', width: '120' }
];

3. Handle the `created` Event

Access the underlying DataGrid instance, clear existing columns, add group headers, assign sub-columns, and refresh the DataGrid.

created(): void {
  const gantt = this.ganttObj as GanttComponent;

  // Step 1: Clear existing columns
  gantt.treeGrid.grid.columns.length = 0;

  // Step 2: Push group columns
  this.Groupcolumns.forEach((col) => {
    gantt.treeGrid.grid.columns.push(col as any);
  });

  // Step 3: Assign sub-columns based on index
  gantt.treeGrid.grid.columns.forEach((col, index) => {
    if (!col.columns) col.columns = [];

    if (index === 0) {
      col.columns.push(this.columns[0], this.columns[1]);
    } else if (index === 1) {
      col.columns.push(
        this.columns[2],
        this.columns[3],
        this.columns[4],
        this.columns[5],
        this.columns[6]
      );
    }
  });

  // Refresh columns
  gantt.treeGrid.grid.refreshColumns();
}

Best Practices

Ensure Groupcolumns and columns arrays are defined before the created event fires.
Use consistent headerText alignment for better UI.
Validate column field names against your data source.

Sample

Refer to this sample for more information.

References

Conclusion

By customizing the underlying DataGrid component of the Angular Gantt Chart, you can implement stacked headers effectively. This approach provides flexibility to group related columns under common headers, improving clarity and usability for complex project data.

We hope you enjoyed learning how to implement stacked headers in the Angular Gantt Chart.

You can refer to the Angular Gantt Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Gantt Chart example to understand how to create and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Gantt Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)