Column Pinning (Frozen) in EJ2 JavaScript Gantt Chart Control

19 Dec 202520 minutes to read

The Syncfusion^® EJ2 JavaScript Gantt Chart control 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 control. 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.

index.js
index.html
var taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    endDate: 'EndDate',
    dependency: 'Predecessor',
    progress: 'Progress',
    parentID: 'ParentID'
};

var labelSettings = {
    taskLabel: 'Progress'
};

var splitterSettings = {
    position: '65%'
};

var gridLines = 'Both';

var gantt = new ej.gantt.Gantt({
    height: '430px',
    dataSource: GanttData,
    taskFields: taskSettings,
    labelSettings: labelSettings,
    frozenColumns: 2,
    treeColumnIndex: 1,
    splitterSettings: splitterSettings,
    gridLines: gridLines,
    allowSelection: false,
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
        { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 290 },
        { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 120, format: 'yMd' },
        { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
        { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 120, format: 'yMd' },
        { field: 'Progress', headerText: 'Progress', textAlign: 'Left', width: 120 },
        { field: 'Predecessor', headerText: 'Predecessor', textAlign: 'Left', width: 120 }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Freeze particular columns

The Syncfusion^® EJ2 JavaScript 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 Chart, set the isFrozen property of the column to true. The following example demonstrates how to freeze a particular column in the Gantt Chart using the isFrozen property.

index.js
index.html
var taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    endDate: 'EndDate',
    dependency: 'Predecessor',
    progress: 'Progress',
    parentID: 'ParentID',
};

var splitterSettings = {
    position: '65%'
};

var labelSettings = {
    taskLabel: 'Progress'
};

var ganttChart = new ej.gantt.Gantt({
    height: '430px',
    dataSource: GanttData,
    taskFields: taskSettings,
    treeColumnIndex: 1,
    splitterSettings: splitterSettings,
    gridLines: 'Both',
    labelSettings: labelSettings,
    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 }
    ],
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Freeze direction

In the Syncfusion^® EJ2 JavaScript Gantt Chart, the freeze direction feature allows 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 Chart 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 on the fixed of the content table.

index.js
index.html
var taskSettings = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  endDate: 'EndDate',
  dependency: 'Predecessor',
  progress: 'Progress',
  parentID: 'ParentID',
  resourceInfo: 'Resources'
};

var splitterSettings = {
  position: '65%'
};

var labelSettings = {
  taskLabel: 'Progress'
};

var resourceFields = {
  id: 'resourceId',
  name: 'resourceName'
};

var ganttChart = new ej.gantt.Gantt({
  height: '430px',
  dataSource: GanttData,
  taskFields: taskSettings,
  treeColumnIndex: 1,
  splitterSettings: splitterSettings,
  gridLines: 'Both',
  resources: resourceCollection,
  resourceFields: resourceFields,
  labelSettings: labelSettings,

  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' }
  ]
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

NOTE

The freeze direction is not compatible when both the isFrozen and frozenColumns properties are enabled simultaneously.

Change default frozen line color

The frozen line borders of frozen columns in the Syncfusion^® EJ2 JavaScript Gantt Chart control can be customized by applying custom CSS styles to the respective frozen columns. This allows 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:

index.js
index.html
var taskSettings = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  endDate: 'EndDate',
  dependency: 'Predecessor',
  progress: 'Progress',
  parentID: 'ParentID'
};

var splitterSettings = {
  position: '65%'
};

var ganttChart = new ej.gantt.Gantt({
  height: '430px',
  dataSource: GanttData,
  taskFields: taskSettings,
  treeColumnIndex: 1,
  splitterSettings: splitterSettings,
  allowSelection: false,
  gridLines: 'Both',

  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' }
  ]
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
    <style>
        .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;
        }

        .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;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="Gantt"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Search docs

Ask HelpBot