Syncfusion AI Assistant

How can I help you?

Column Pinning (Frozen) in Angular Gantt Chart Component

6 Feb 202615 minutes to read

The Syncfusion® Angular Gantt Chart component provides a frozen columns feature that keeps selected columns fixed while scrolling horizontally through large datasets. This functionality ensures that critical information remains visible at all times, improving readability and user experience. By maintaining key columns in view, it simplifies navigation and makes referencing important data points easier when working with extensive project details.

To enable frozen columns, use the frozenColumns property in the Gantt Chart component.

In the following example, the frozenColumns property is set to 2, which keeps the first two columns fixed on the left while the remaining columns can be scrolled horizontally.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [labelSettings]="labelSettings" [taskFields]="taskSettings" [frozenColumns]="2" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [gridLines]="gridLines" [allowSelection]="false">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="EndDate" headerText="End Date" textAlign="Right" width="120"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Left" width="120"></e-column>
        <e-column field="Predecessor" headerText="Predecessor" textAlign="Left" width="120"></e-column>
      </e-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public gridLines?: string;
  public labelSettings: any;
  public ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      endDate: 'EndDate',
      dependency:'Predecessor',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.labelSettings={
        taskLabel: 'Progress'
    }
    this.gridLines = 'Both';
    this.splitterSettings = {
      position: '65%'
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Freeze particular columns

The Syncfusion® Angular Gantt provides a feature that enables freezing specific columns, significantly enhancing data visibility and improving the user experience. The isFrozen property is used at the column level to freeze a specific column at any desired index on the left side, offering flexibility in managing which columns are frozen.

To freeze a particular column in the Gantt, set the isFrozen property of the column to true.

The following example demonstrates how to freeze a particular column in the Gantt using the isFrozen property.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [columns]="columns" [labelSettings] = "labelSettings" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [allowSelection]="false" [gridLines]="gridLines">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public gridLines?: string;
  public columns?: object[];
  public labelSettings?: object;
  public ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      endDate: 'EndDate',
      progress: 'Progress',
      parentID: 'ParentID',
    };
    this.gridLines = 'Both';
    this.splitterSettings = {
      position: '65%'
    };
    this.labelSettings = {
      taskLabel: 'Progress',
      rightLabel: 'TaskName'
    }
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', isFrozen: true, },
      { field: 'TaskName', headerText: 'Task Name', width: 220, isFrozen: true,},
      { field: 'StartDate', headerText: 'Start Date', },
      { field: 'Duration', headerText: 'Duration',},
      { field: 'Progress', headerText: 'Progress', },
      { field: 'Status', headerText: 'Status',isFrozen: true, },
    ];
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Freeze direction

In the Syncfusion® Angular Gantt, the freeze direction feature allows you to position frozen columns either to the left, right, or in a fixed position, while still allowing the remaining columns to be horizontally movable.

To achieve this, the column.freeze property can be utilized. This property is used to specify the freeze direction for individual columns.

The types of the column.freeze directions:

  • Left: When the column.freeze property is set to Left, specific columns will be frozen on the left side.

  • Right: When the column.freeze property is set to Right, certain columns will be frozen on the right side.

  • Fixed: The Fixed direction locks a column at a fixed position within the Gantt columns. This ensures that the column is always visible during horizontal scroll.

In the following example, the TaskID column is frozen on the left side, the resources column is frozen on the right side and the Progress column is frozen in a fixed position within the content table.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData, resourceCollection } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [columns]="columns" [labelSettings]="labelSettings" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [gridLines]="gridLines" [resources]="resources" [resourceFields]="resourceFields" >
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public gridLines?: string;
  public columns?: object[];
  public resources: any;
  public resourceFields : any;
  public labelSettings: any;
  public ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      endDate: 'EndDate',
      dependency:'Predecessor',
      progress: 'Progress',
      parentID: 'ParentID',
      resourceInfo: 'Resources',
    };
    this.gridLines = 'Both';
    this.splitterSettings = {
      position: '65%'
    };
    this.resources = resourceCollection;
    this.resourceFields = {
        id: 'resourceId',
        name: 'resourceName',
    };
    this.labelSettings={
        taskLabel: 'Progress'
    }
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', freeze: 'Left', },
      { field: 'TaskName', headerText: 'Task Name', width: 200,},
      { field: 'StartDate', headerText: 'Start Date', width: 130, },
      { field: 'Duration', headerText: 'Duration', width: 110,},
      { field: 'EndDate', headerText: 'End Date',width: 130, },
      { field: 'Progress', headerText: 'Progress', width: 110, freeze: 'Fixed' },
      { field: 'Predecessor', headerText: 'Dependency', width: 120 },
      { field: 'Resources', headerText: 'Assignee', freeze: 'Right' },
    ];
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change default frozen line color

The frozen line borders of frozen columns in the Syncfusion® Angular Gantt Chart component can be customized by applying custom CSS styles to the respective frozen columns. This allows you to change the border color of left, right, and fixed frozen columns to match your application’s design and theme.

To change the default frozen line color, use the following CSS class names and apply the desired border color:

For left frozen columns:

.e-gantt .e-leftfreeze.e-freezeleftborder {
    border-right-color: rgb(0, 255, 0) !important;
}

For right frozen columns:

.e-gantt .e-rightfreeze.e-freezerightborder {
    border-left-color: rgb(0, 0, 255) !important;
}

For fixed frozen columns, both left and right borders need to be specified as mentioned below:

.e-gantt .e-leftfreeze.e-freezeleftborder {
    border-right-color: rgb(0, 255, 0) !important;
}

.e-gantt .e-rightfreeze.e-freezerightborder {
    border-left-color: rgb(0, 0, 255) !important;
}

The following example demonstrates how to change the default frozen line color using CSS:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttAllModule],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [columns]="columns" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [allowSelection]="false" [gridLines]="gridLines">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public gridLines?: string;
  public columns?: object[];
  public ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      endDate: 'EndDate',
      dependency:'Predecessor',
      progress: 'Progress',
      parentID: 'ParentID',
    };
    this.gridLines = 'Both';
    this.splitterSettings = {
      position: '65%'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', freeze: 'Left', },
      { field: 'TaskName', headerText: 'Task Name', width: 200, freeze: 'Left'},
      { field: 'StartDate', headerText: 'Start Date', },
      { field: 'Duration', headerText: 'Duration',},
      { field: 'EndDate', headerText: 'End Date',},
      { field: 'Progress', headerText: 'Progress', freeze:'Right' },
      { field: 'Status', headerText: 'Status' },
    ];
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitations