Frozen in EJ2 JavaScript Grid control

8 Sep 202319 minutes to read

Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the grid while scrolling.

In this demo, the frozenColumns is set as ‘2’ and the frozenRows is set as ‘3’. Hence, the left two columns and top three rows are frozen.

ej.grids.Grid.Inject(ej.grids.Freeze);
var grid = new ej.grids.Grid({
    dataSource: data,
    height: 315,
    allowSelection: false,
    enableHover: false,
    frozenRows: 3,
    frozenColumns: 2,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 },
        { field: 'ShipAddress', headerText: 'Ship Address', width: 170 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
        { field: 'ShipRegion', headerText: 'Ship Region', width: 150 },
        { field: 'ShipPostalCode', headerText: 'Ship Postal Code', width: 150 },
        { field: 'Freight', headerText: 'Freight', width: 120 }
    ]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/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" style="height:350px;">
        <div id="Grid"></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>

  • Frozen rows and columns should not be set outside the grid view port.
  • Frozen Grid will support row and column virtualization feature, which helps to improve the Grid performance while loading a large dataset.

Limitations of Frozen Grid

The following features are not supported in frozen rows and columns:

  • Detail Template
  • Hierarchy Grid

Freeze particular columns

You can use isFrozen property to freeze selected columns in grid.

In this demo, the columns with field name OrderID and EmployeeID is frozen using the isFrozen property.

ej.grids.Grid.Inject(ej.grids.Freeze);
var grid = new ej.grids.Grid({
     dataSource: data,
    height: 315,
    allowSelection: false,
    enableHover: false,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isFrozen: true },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
        { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120, isFrozen: true },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 },
        { field: 'ShipAddress', headerText: 'Ship Address', width: 170 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
        { field: 'ShipRegion', headerText: 'Ship Region', width: 150 },
        { field: 'ShipPostalCode', headerText: 'Ship Postal Code', width: 150 },
        { field: 'Freight', headerText: 'Freight', width: 120 }
    ]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/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" style="height:350px;">
        <div id="Grid"></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>

  • isFrozen is not compatible with the Freeze direction feature.

Freeze Direction

You can freeze the Grid columns on the left or right side by using the column.freeze property and the remaining columns will be movable. The grid will automatically move the columns to the left or right position based on the column.freeze value.

Types of the column.freeze directions:

  • Left: Allows you to freeze the columns at the left.
  • Right: Allows you to freeze the columns at the right.
  • Fixed: Allows you to lock the column at a fixed position by ensuring its visibility during horizontal scroll.

In this demo, the ShipCountry column is frozen at the left and the CustomerID column is frozen at the right side of the content table.

ej.grids.Grid.Inject(ej.grids.Freeze);
var grid = new ej.grids.Grid({
    dataSource: data,
    height: 315,
    enableHover: false,
    frozenRows: 2,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'Freight', headerText: 'Freight', format: 'C2', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 150, freeze: 'Right' },
        { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
        { field: 'ShipName', headerText: 'Ship Name', width: 150 },
        { field: 'ShipAddress', headerText: 'Ship Address', width: 170 },
        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 150, freeze: 'Left' }
    ]
});
grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/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" style="height:350px;">
        <div id="Grid"></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>

Deprecated Methods

Deprecated Methods Previous Current Suggested Alternative Methods Example for achieving the same results
getMovableRows() In the previous architecture of frozen grid, three separate tables were created for the left, right, and movable contents. When calling this method, it would return only the movable table rows (tr’s). In the current architecture, the frozen left, right, and movable sections are applied within a single table. When calling this method, it will return all table rows (tr’s) of the entire table. However, in this approach, we have introduced the e-unfreeze class for movable cells. This allows us to selectively retrieve the movable rows using the e-unfreeze class selector. getRows() gridInstance.getMovableRows()[0].querySelectorAll(‘.e-unfreeze’) // Deprecated

(or)

gridInstance.getRows()[0].querySelectorAll(‘.e-unfreeze’) // Alternative method
getFrozenRightRows() In the previous architecture, this method would return only the table rows (tr’s) from the freeze right table. In the current architecture, the frozen left, right, and movable sections are applied within a single table. When calling this method, it will return all the rows (tr’s) of the entire table. In this new approach, we have introduced the e-rightfreeze class for right freeze cells. As a result, you can now selectively retrieve the right freeze rows using the e-rightfreeze class selector. getRows() gridInstance.getFrozenRightRows()[0].querySelectorAll(‘.e-rightfreeze’) // Deprecated

(or)

gridInstance.getRows()[0].querySelectorAll(‘.e-rightfreeze’) // Alternative method
getMovableRowByIndex()
getFrozenRowByIndex()
getFrozenRightRowByIndex()
In the previous architecture, you could select rows by using separate methods for each table section. Like,
* getMovableRowByIndex - select a movable row
* getFrozenRowByIndex - select a freeze row
* getFrozenRightRowByIndex - select a right freeze row.
In the current architecture, the getMovableRowByIndex, getFrozenRightRowByIndex and getFrozenRowByIndex methods all return the same table row (tr) based on the given index. Additionally, class names for table cells (td’s) have been separated as follows:
* Left-Freeze : e-leftfreeze
* Movable : e-unfreeze
* Right-Freeze : e-rightfreeze.
This separation of class names makes it easier to target and customize the cells within the particular row.
getRowByIndex() To get the left freeze cells:
gridInstance.getRowByIndex(1).querySelectorAll(‘.e-leftfreeze’)

To get the movable cells:
gridInstance.getRowByIndex(1).querySelectorAll(‘.e-unfreeze’)

To get the right freeze cells:
gridInstance.getRowByIndex(1).querySelectorAll(‘.e-rightfreeze’)
getMovableCellFromIndex()
getFrozenRightCellFromIndex()
* getMovableCellFromIndex() - select a particular cell in the movable table.
* getFrozenRightCellFromIndex() - select a particular cell in the right freeze table.
In the new approach, you can select a particular cell by using both the getFrozenRightCellFromIndex and getMovableCellFromIndex methods. getCellFromIndex() gridInstance.getCellFromIndex(1,1)
getMovableDataRows()
getFrozenRightDataRows()
getFrozenDataRows()
These methods returns the viewport data rows for the freeze, movable, and right tables separately. In the new approach, when calling the getMovableDataRows, getFrozenRightDataRows, and getFrozenDataRows methods, returns the entire viewport data rows. You can then select specific cells within these rows using the following selectors
* Left-Freeze : e-leftfreeze
* Movable : e-unfreeze
* Right-Freeze : e-rightfreeze.
getDataRows() To get the movable data cells:
gridInstance.getDataRows()[0].querySelectorAll(‘.e-unfreeze’)

To get the right freeze data cells:
gridInstance.getDataRows()[0].querySelectorAll(‘.e-rightfreeze’)

To get the left freeze data cells:
gridInstance.getDataRows()[0].querySelectorAll(‘.e-leftfreeze’)
getMovableColumnHeaderByIndex()
getFrozenRightColumnHeaderByIndex()
getFrozenLeftColumnHeaderByIndex()
In the previous architecture, these methods selects the movable, right freeze, and left freeze headers from the table separately. In the new approach, when calling the getMovableColumnHeaderByIndex, getFrozenRightColumnHeaderByIndex, and getFrozenLeftColumnHeaderByIndex methods, you will still receive the same results as before. getColumnHeaderByIndex() gridInstance.getColumnHeaderByIndex(1)

When a validation message is displayed in the frozen part (Left, Right, Fixed) of the table, scrolling is prevented until the validation message is cleared.