Headers in EJ2 JavaScript Grid control

12 Jul 202424 minutes to read

The Syncfusion EJ2 JavaScript Grid control provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.

Header text

By default, the header text of a column in Grid is displayed from the column’s field value. However, you can easily override the default header title and provide a custom header text for the column using the headerText property.

To enable the headerText property, you simply need to define it in the columns property. The following example demonstrates how to enable header text for a Grid column.

index.js
index.html
var grid = new ej.grids.Grid({
    dataSource: data,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 140, },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C', width: 120 },
        { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', format: 'yMd', width: 140 }
    ],
    height: 315
});
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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-notifications/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="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>

The headerText property is optional, and if it is not defined, then the corresponding column’s field value is set as header text for that column.

You can also use the headerTemplate property to apply custom HTML content to the header cell.

If both the field and headerText are not defined in the column, the column renders with empty header text.

Header template

The headerTemplate property is used to customize the header element of a Grid column. With this property, you can render custom HTML elements or EJ2 JavaScript control to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering.

In this demo, the custom element is rendered for both CustomerID and OrderDate column headers.

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, },
    {
      field: 'CustomerID', headerText: 'Customer ID', width: 140,
      headerTemplate: ` <div>
            <span class="e-icon-userlogin"></span> 
            Customer ID
            </div>`,
    },
    { field: 'Freight', headerText: 'Freight', format: "C", width: 120, headerTemplate: ` <div id='Freight'></div>`, },
    {
      field: 'OrderDate', headerText: 'Order Date', textAlign: "Right", width: 200, format: 'yMd',
      headerTemplate: `<div><span id='OrderDate'></span>
        <label id='headerText' style='margin-left:8px'>Order Date</label>
        </div>`
    },
  ],
  height: 315
});
grid.appendTo('#Grid');

var dropdownData = ['Freight', 'Shipment', 'Cargo'];

var dropDownColumn = new ej.dropdowns.DropDownList({
  value: 'Freight',
  popupHeight: '200px',
  dataSource: dropdownData,
});
dropDownColumn.appendTo('#Freight');

var toggleButton = new ej.buttons.Switch({
  headerText: 'Order Date',
  change: onSwitchToggle,
});
toggleButton.appendTo('#OrderDate');

function onSwitchToggle(args) {
  headerText = args.checked ? 'Purchase Date' : 'Order Date';
  document.getElementById('headerText').innerHTML = headerText;
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'ej2-headertemplate';
            src:
                url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vTFIAAAEoAAAAVmNtYXDS2c5qAAABjAAAAEBnbHlmQmNFrQAAAdQAAANoaGVhZBRdbkIAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCOAbQAAAHMAAAACG1heHABHgENAAABCAAAACBuYW1lohGZJQAABTwAAAKpcG9zdA2o3w0AAAfoAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAATBXy9l8PPPUACwQAAAAAANillKkAAAAA2KWUqQAAAAAD9APzAAAACAACAAAAAAAAAAEAAAADAQEAEQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLpYAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucC6WD//wAA5wLpYP//AAAAAAABAAYABgAAAAIAAQAAAAAAjgG0ABEAAAAAA8kD8wADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwBPAGsAACUVIzUjFSM1IxUjNSMVIzUjFSM1JRUjNSMVIzUjFSM1IxUjNSMVIzUlFSM1IxUjNSMVIzUjFSM1IxUjNQMVHwYhPwcRITcjDwghNS8HIzUjFSE1IwN2U1NTU1RTU1NTAuxTU1NTVFNTU1MC7FNTU1NUU1NTU1QCAwUGBggIA0QICAcHBQQBAvxsp30ICAcHAgUDAQEDlAECBAUHBwgIfVP+YFOzU1NTU1NTU1NTU6dUVFRUVFRUVFRUplNTU1NTU1NTU1P+NgQIBwcGBAMCAQIEBQcHAwgCdPoBAgQFAwcHCIF8CQgHBgUEAgFTU1MABAAAAAAD9APeADQAbQCuAQAAAAEfCDc1Lwc1PwIPBy8HHww3HwQPATMVPwc1Lx0jDwMfAgUdAR8GBTUzLxQjDx0BFxUfEDsBPxA1Nyc1LxIPEhUCCg8OGxcVExANCgMBAQMDCQQDAgECAxESEhMTExUUFRQTFBISEhEHCwYHCAkKCw0NDw8SuQQGAwIBAgRxlgsKCQcGBAMBAgMDAwUFBQcGBwgICQkKCgsKDAsMDQwNDQ4NDg45BQUDAQEEA/1eAgUGBwkKCwHjeggKDhEUFxs1FRMSEA4NCwoJBwcJBjwODg0ODQ0MDQwLDAoLCgoJCQgIBwYHBQUFAwMDAgEBAQECAgYICg0ODxISFBUXFwwMDA0MDQwMFxcVFBISDw4MCwgGAgIBAQICAwcJCw0PERITFRUXDAwMDA0NDAwMDAsXFRQTEQ8ODQoIBgICAVQEAwgJCgsMCwwbEBAREREZEA8VDAwKCgoIBwYFAwIBAQIDBQYHCAoUFQwLCwsLCgoJCAcGMwsWFhUVHB3QAQIEBggICgueDg4ODg0NDA0MCwsLCwoKCQgJBwgGBwUFBAQDAwECCw8NDxETCrIlawsKCAgGBAIB0AoLCwoLCQgNCAkLDA0NDg4ODg4ZFAIBAwMEBAUGBgYIBwkICQoKCwsLDAwMDA0ODQ4ODgH7DQwMDBgWFRQTERAODAoIBgICAQECAgYICgwOEBETFBUWGAwMDA0MDQwMCxcWFRMSEA8NDAkHAwIBAQEBAQECAwMICwwOEBETFBUWFwwMDQAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQASAAEAAQAAAAAAAgAHABMAAQAAAAAAAwASABoAAQAAAAAABAASACwAAQAAAAAABQALAD4AAQAAAAAABgASAEkAAQAAAAAACgAsAFsAAQAAAAAACwASAIcAAwABBAkAAAACAJkAAwABBAkAAQAkAJsAAwABBAkAAgAOAL8AAwABBAkAAwAkAM0AAwABBAkABAAkAPEAAwABBAkABQAWARUAAwABBAkABgAkASsAAwABBAkACgBYAU8AAwABBAkACwAkAacgZWoyLWhlYWRlcnRlbXBsYXRlUmVndWxhcmVqMi1oZWFkZXJ0ZW1wbGF0ZWVqMi1oZWFkZXJ0ZW1wbGF0ZVZlcnNpb24gMS4wZWoyLWhlYWRlcnRlbXBsYXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBSAGUAZwB1AGwAYQByAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAGUAagAyAC0AaABlAGEAZABlAHIAdABlAG0AcABsAGEAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAGoAMgAtAGgAZQBhAGQAZQByAHQAZQBtAHAAbABhAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAtCVF9DYWxlbmRhcghlbXBsb3llZQAA) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .e-icon-userlogin:before {
            font-family: 'ej2-headertemplate';
            content: "\e702";
        }

        .e-icon-userlogin {
            margin-right: 5px;
        }
    </style>
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="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>

The headerTemplate property is only applicable to Grid columns that have a header element.

You can use any HTML or EJ2 JavaScript control in the header template to add additional functionality to the header element.

Stacked header

In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the columns->columns property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the headerText property of each sub-header column to set the text for that sub-header.

You can customize the appearance of the stacked header elements by using the headerTemplate property. This property accepts an id reference, which allows you to define custom HTML elements or EJ2 JavaScript control to the header element. Here’s an example of how to use stacked headers with a custom headerTemplate in Syncfusion Grid.

index.js
index.html
var grid = new ej.grids.Grid({
    dataSource: data,
    allowPaging: true,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Center', headerTemplate: '#orderID' },
        {
            headerText: 'Order Details', headerTemplate: '#orderDate',
            columns: [
                { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 130, textAlign: 'Right', minWidth: 10, },
                { field: 'Freight', headerText: 'Freight($)', width: 120, format: 'C1', textAlign: 'Right', minWidth: 10, },
            ]
        },
        {
            headerText: 'Ship Details',
            headerTemplate: '<div> <span>Ship Details</span><span>(<i class="fa fa-truck"></i>)</span></div>',
            columns: [
                { field: 'ShippedDate', headerText: 'Shipped Date', format: 'yMd', textAlign: 'Right', width: 150, minWidth: 10, },
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150, minWidth: 10, },
            ]
        }]
});
grid.appendTo('#Grid');
var dropdownData = ['Order Details', 'Order Information'];
var dropdownList = new ej.dropdowns.DropDownList({
    value: 'Order Details',
    popupHeight: '200px',
    dataSource: dropdownData,
});
dropdownList.appendTo('#orderdate');
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="Grid"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script id="orderID" let-data>

        <a href="#">OrderID</a>
    </script>
    <div id="orderDate" let-data>
        <div id="orderdate"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Align the text of header text

You can horizontally align the text in column headers of the Grid control using the headerTextAlign property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the headerTextAlign property to one of the following options:

Left: Aligns the text to the left (default).
Center: Aligns the text to the center.
Right: Aligns the text to the right.
Justify: Header text is justified.

The following example demonstrates how to dynamically change the alignment of the header text based on DropDown change:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 140 },
    { field: 'Freight', headerText: 'Freight', format: 'C', width: 120 },
    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 140 },
  ],
  height: 315,
});
grid.appendTo('#Grid');

var alignmentData = [
  { text: 'Left', value: 'Left' },
  { text: 'Right', value: 'Right' },
  { text: 'Center', value: 'Center' },
  { text: 'Justify', value: 'Justify' }
]

var dropdownList = new ej.dropdowns.DropDownList({
  value: 'Left',
  popupHeight: '240px',
  width: 100,
  dataSource: alignmentData,
  change: changeAlignment,
});
dropdownList.appendTo('#dropdown');

function changeAlignment(args) {
  grid.columns.forEach((column) => {
    column.headerTextAlign = args.value
  })
  grid.refreshHeader();
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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 style="padding-bottom: 10px">
        <br>
        <label 30px 17px 0 0>Align the text of header text :</label>
        <input type="text" tabindex="1" id="dropdown" />
    </div>
    <div id="Grid">
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

The headerTextAlign property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the textAlign property.

You can also use the headerTextAlign property with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well.

Autowrap the header text

The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.

To enable autowrap, set the allowTextWrap property to true. You can also configure the auto wrap mode by setting the textWrapSettings.wrapMode property.

Grid provides the below three options for configuring:

Both: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped.
Header: With this option, only the grid header text is wrapped.
Content: With this option, only the grid content is wrapped.

If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid’s width.

If a column’s header text contains no white space, the text may not be wrapped.

If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the headerTemplate and template properties of the column to customize the appearance of the header and cell content.

The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change.

index.js
index.html
var grid = new ej.grids.Grid({

  dataSource: data,
  allowPaging: true,
  allowTextWrap: true,
  textWrapSettings: { wrapMode: 'Header' },
  height: 400,

  columns: [
    { field: 'Inventor', headerText: 'Inventor Name', width: 180, textAlign: 'Right' },
    { field: 'NumberofPatentFamilies', headerText: 'Number of Patent Families', width: 180, textAlign: "Right" },
    { field: 'Country', headerText: 'Country', width: 140, textAlign: 'Right', },
    { field: 'Active', headerText: 'Active', width: 120 },
    { field: 'Mainfieldsofinvention', headerText: 'Main Feilds Of Invention', width: 200 },
  ],
});
grid.appendTo('#Grid');

var dropdownData = [
  { text: 'Header', value: 'Header' },
  { text: 'Both', value: 'Both' },
]

var dropdown = new ej.dropdowns.DropDownList({
  dataSource: dropdownData,
  popupHeight: '240px',
  width: '100px',
  value: grid.textWrapSettings.wrapMode,
  change: valueChange,
});
dropdown.appendTo('#dropdownlist');

function valueChange(args) {
  grid.textWrapSettings.wrapMode = args.value;
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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 style="padding-bottom: 10px">
        <label padding: 30px 17px 0 0>Autowrap for header column :</label>
        <input type="text" tabindex="1" id="dropdownlist" />
    </div>

    <div id="container">
        <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>

Change the height of header

Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content. This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods.

Using CSS

You can use CSS to override the default height of the .e-grid .e-headercell class to change the height of the header. Here is an example code snippet:

.e-grid .e-headercell {
  height: 130px;
}

Using methods

To change the height of the header dynamically, you can use the getHeaderContent method to get the header content element of the Syncfusion Grid. Then, you can use the querySelectorAll method to get all the header cell elements with the class e-headercell. Finally, you can loop through each header cell element and set its style property to adjust the height.

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  columns: [
    {field: 'OrderID',headerText: 'Order ID',width: 120},
    {field: 'CustomerID',headerText: 'Customer ID',width: 140,},
    {field: 'Freight',headerText:'Freight', format: 'C', width: 120 },
    {field: 'OrderDate',headerText: 'Order Date',format: 'yMd',width: 140},
  ],
});
grid.appendTo('#Grid');

var button = new ej.buttons.Button({
  content: 'CHANGE HEIGHT TO 20PX',
});
button.appendTo('#small');

var button1 = new ej.buttons.Button({
  content: 'DEFAULT HEIGHT TO 42PX',
});
button1.appendTo('#medium');

var button2 = new ej.buttons.Button({
  content: 'CHANGE HEIGHT TO 60PX',
});
button2.appendTo('#big');

document.getElementById('changeHeight').onclick = function (event) {
  var heightMap = { small: '20px', medium: '42px', big: '60px' };
  var headerCells = (grid).getHeaderContent().querySelectorAll('.e-headercell');
  headerCells.forEach((headerCell) => {
    headerCell.style.height = (heightMap)[
      event.target.id
    ];
  });
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="changeHeight">
    <button ejs-button id="small" cssClass="e-small">
      Change height to 20px
    </button>
    <button ejs-button id="medium" cssClass="e-small">
      Default height to 40px
    </button>
    <button ejs-button id="big" cssClass="e-small">
      Change height to 60px
    </button>
  </div>
  <br>
  <div id="container">
    <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>

You can also use the getHeaderTable method to get the table element of the header, and then adjust the height.

You cannot change the height of row below the default height of 42px using the e-columnheader class.

Change the header text dynamically

The Syncfusion Grid controls provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience.

Using event

To modify the header text of a corresponding column dynamically, you can use the headerCellInfo event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid.

When the headerCellInfo event is triggered, it provides a HeaderCellInfoEventArgs object as a parameter. This object contains the following properties:

cell: Defines the header cell that is being modified.
node: Defines the DOM element of the header cell that is being modified.

You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the refreshHeader method of the Grid.

Using method

The Grid control provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use:

1.getColumnByField: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column.

2.getColumnHeaderByField: Retrieves the header element of a column based on its field name. You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.

3.getColumnIndexByField: Retrieves the index of a column based on its field name. You can then use the getColumnByIndex method to retrieve the column object and modify its headerText property to change the header text.

4.getColumnByUid: Retrieves the column object based on its unique identifier (UID). You can modify the headerText property of the column object to change the header text.

5.getColumnHeaderByIndex: Retrieves the header element of a column based on its zero-based index. You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.

6.getColumnIndexByUid: Retrieves the index of a column based on its unique identifier (UID). You can then use the getColumnByIndex method to retrieve the column object and modify its headerText property to change the header text.

7.getColumnHeaderByUid: Retrieves the header element of a column based on its unique identifier (UID). You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. If you only have an template for the column header, and the column itself is not defined with a field , then you can use the getColumnHeaderByUid method to get a reference to the header element and modify its text content to change the header text.

When you change the header text dynamically, make sure to refresh the Grid to reflect the changes by calling the refreshHeader method.

The unique identifier(UID) is automatically generated by the Grid control and may change whenever the grid is refreshed or updated.

Here is an example of how to change the header text of a column using the getColumnByField method:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 140 },
    { field: 'Freight', headerText: 'Freight', format: 'C', width: 120 },
    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 140 },
  ],
});
grid.appendTo('#Grid');

var columns =
  [
    { text: 'OrderID', value: 'OrderID' },
    { text: 'CustomerID', value: 'CustomerID' },
    { text: 'Freight', value: 'Freight' },
    { text: 'OrderDate', value: 'OrderDate' },
  ]

var field = { text: 'text', value: 'value' };

var dropdown = new ej.dropdowns.DropDownList({
  dataSource: columns,
  fields: field,
  value: 'OrderID',
  popupHeight: '240px',
  width: 220,
});
dropdown.appendTo('#dropdownlist');

var textbox = new ej.inputs.TextBox({
  placeholder: 'Enter new header text',
  width: 220,
});
textbox.appendTo('#textboxvalue');

var button = new ej.buttons.Button({
  content: 'Change',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function () {
  if (textbox.value.trim() !== '') {
    var column = grid.getColumnByField(dropdown.value);
    column.headerText = textbox.value;
    grid.refreshHeader();
  }
};
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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 style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Select a column Name : </label>
      <input type="text" tabindex="2" id="dropdownlist" />
    </div>
    <div style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Enter New Header Text : </label>
      <input type="text" tabindex="2" id="textboxvalue" />
    </div>
    <div style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Click the change button : </label>
      <button ejs-button id="buttons" cssClass="e-small"></button>
    </div>
    <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>

Changing header text using headerValueAccessor property

The headerValueAccessor property in Syncfusion Grid allows you to customize the text of a column header cell, which can be useful in scenarios where you want to change the text to display it in a different language, format or add additional information to the header. This property is triggered every time the header cell is rendered.

To enable the headerValueAccessor property, you need to set the headerValueAccessor property of the corresponding column. This property accepts a callback function that takes two arguments:

field: Represents the current field of the column.
column: Represents the current column object.

The headerValueAccessor property should only be used to change the text of the header and not to perform any DOM-oriented operations such as adding or manipulating DOM elements in the header. In such cases, you should use the headerCellInfo event instead.

The headerValueAccessor property is triggered every time the header cell is rendered or refreshed.

The callback function defined for the headerValueAccessor property should return a string that represents the new text of the column header.

If you only need to refresh the column header, you can dynamically change the header content using the refreshHeader method.

You can use this property for individual columns or for all columns by adding it to the grid’s properties.

Here’s an example of how to use the headerValueAccessor property to change the header text of a column:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', headerValueAccessor: headerValueAccessor, width: 120 },
    { field: 'CustomerID', headerText: 'Customer ID', headerValueAccessor: headerValueAccessor, width: 140 },
    { field: 'Freight', headerText: 'Freight', headerValueAccessor: headerValueAccessor, format: 'C', width: 120 },
    { field: 'OrderDate', headerText: 'Order Date', headerValueAccessor: headerValueAccessor, format: 'yMd', width: 140 },
  ],
});
grid.appendTo('#Grid');

var columns = [
  { text: 'OrderID', value: 'OrderID' },
  { text: 'CustomerID', value: 'CustomerID' },
  { text: 'Freight', value: 'Freight' },
  { text: 'OrderDate', value: 'OrderDate' },
];

var field = { text: 'text', value: 'value' };

var dropdown = new ej.dropdowns.DropDownList({
  dataSource: columns,
  fields: field,
  value: 'OrderID',
  popupHeight: '240px',
  width: 220,
});
dropdown.appendTo('#dropdownlist');

var textbox = new ej.inputs.TextBox({
  placeholder: 'Enter new header text',
  width: 220,
});
textbox.appendTo('#textboxvalue');

var button = new ej.buttons.Button({
  content: 'Change',
});
button.appendTo('#buttons');

function headerValueAccessor(field, columns) {
  if (textbox && textbox.value && textbox.value.trim() !== '' && columns.field === dropdown.value) {
    columns.headerText = textbox.value;
  }
}

document.getElementById('buttons').onclick = function () {
  grid.refreshHeader();
};
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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 style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Select a column Name : </label>
      <input type="text" tabindex="2" id="dropdownlist" />
    </div>
    <div style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Enter New Header Text : </label>
      <input type="text" tabindex="2" id="textboxvalue" />
    </div>
    <div style="padding-bottom: 10px">
      <label padding: 30px 17px 0 0>Click the change button :  </label>
      <button ejs-button id="buttons" cssClass="e-small"></button>
    </div>
    <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>

Changing the header text of all columns

If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the headerText property for each column. Here is an example:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
    { field: 'CustomerID', headerText: 'CustomerID', width: 120 },
    { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C2', width: 90 },
    { field: 'ShipCity', headerText: 'Ship City', format: 'yMd', width: 120 },
  ],
  height: 280,
});
grid.appendTo('#Grid');

var headerTextMap =
{
  'OrderID': 'Order ID',
  'CustomerID': 'Customer ID',
  'Freight': 'Freight Charge',
  'ShipCity': 'Ship To City'
}

var button = new ej.buttons.Button({
  content: 'Change Header Text',
  cssClass: "e-success",
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function () {
  grid.columns.forEach((column) => {
    column.headerText = headerTextMap[column.field];
  });
  grid.refreshHeader();
};
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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">
    <button ejs-button id="buttons" cssClass="e-success"></button>
    </br></br>
    <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>

Change the orientation of header text

By default, the text in the column headers of the Syncfusion Grid controls is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the customAttributes property of the Grid columns.

Follow the below steps to change the orientation of the header text in Grid:

Step 1: Create a CSS class with orientation style for grid header cell

To rotate the header text, you can create a CSS class with the transform property that rotates the header text 90 degrees. This class will be added to the header cell using the customAttributes property.

.orientationcss .e-headercelldiv {
    transform: rotate(90deg);
}

Step 2: Add the custom CSS class to the grid column

Once you have created the CSS class, you can add it to the particular column by using the customAttributes property. This property allows you to add any custom attribute to the grid column.

For example, to add the orientation css class to the Freight column, you can use the following code:

 { field: 'Freight', headerText: 'Freight', textAlign: 'Center', format: 'C2', customAttributes: {class: 'orientationcss'}, width: 80}

Step 3: Resize the header cell height

After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code:

function setHeaderHeight() {
  var textWidth = document.querySelector('.orientationcss > div').scrollWidth; //Obtain the width of the headerText content.
  var headerCell = document.querySelectorAll('.e-headercell');
  for (var i = 0; i < headerCell.length; i++) {
    // Assign the obtained textWidth as the height of the headerCell.
    headerCell.item(i).style.height = textWidth + 'px';
  }
}

The following example demonstrates how to change the orientation of the Freight column header text to 90 degrees:

index.js
index.html
var customAttributes = { class: 'orientationcss' };
var grid = new ej.grids.Grid({
  dataSource: data,
  created: setHeaderHeight,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
    { field: 'Freight', textAlign: 'center', format: 'C2', customAttributes: customAttributes, width: 80 },
    { field: 'ShipCity', headerText: 'Ship City', width: 100, format: 'yMd' },
  ],
  height: 240,
});
grid.appendTo('#Grid');

function setHeaderHeight() {
  var textWidth = document.querySelector('.orientationcss > div').scrollWidth;
  var headerCell = document.querySelectorAll('.e-headercell');
  for (var i = 0; i < headerCell.length; i++) {
    // Assign the obtained textWidth as the height of the headerCell.
    headerCell.item(i).style.height = textWidth + 'px';
  }
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
  <style>
    body {
      touch-action: none;
    }

    .orientationcss .e-headercelldiv {
      transform: rotate(90deg);
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="container">
    <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>

Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful.

To enable custom tooltips for headers, you can use the beforeRender event of the Grid control. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using tooltip control.

Here’s an example of how to use the beforeRender event to add a custom tooltip to a header cell:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120 },
    { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2' },
    { field: 'ShipName', headerText: 'Ship Name', width: 150 },
    { field: 'ShipCountry', headerText: 'Ship Country', width: 120 },
    { field: 'OrderDate', headerText: 'Order Date', type: 'date', format: 'yMd', width: 120 },
  ],
});
grid.appendTo('#Grid');

var columnDescriptions = {
  'Order ID': 'A unique number assigned to each order.',
  'Freight': 'The cost of shipping the order.',
  'Ship Name':
    'The name of the person or company who will receive the shipment.',
  'Ship Country': 'The country to which the shipment will be sent.',
  'Order Date': 'The date when the order was placed.',
};

var tooltip = new ej.popups.Tooltip({
  beforeRender: beforeRender,
  target: '.e-headertext',
});
tooltip.appendTo('#tooltip');

function beforeRender(args) {
  var description = columnDescriptions[args.target.innerText];
  if (description) {
    tooltip.content = args.target.innerText + ': ' + description;
  }
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="tooltip">
      <div id="Grid"></div>
    </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>

The headerCellInfo event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.

Customize header text styles

Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion EJ2 JavaScript Grid control.

Using CSS

You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The .e-headercell class can be used to change the background color and text color of the column header.

  .e-grid .e-headercell {
    background-color: #a2d6f4;
    color:rgb(3, 2, 2);
  }

Here’s an example that demonstrates how to customize the appearance of a specific column header in the Grid using className.

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150, textAlign: 'Right' },
    { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
    { field: 'Freight', headerText: 'Freight', width: 140, format: 'C2', textAlign: 'Right' },
    { field: 'ShipCountry', headerText: 'Ship Country', width: 130, format: 'yMd', textAlign: 'Right' },
  ]
});
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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
  <style>
    .e-grid .e-headercell {
      background-color: #a2d6f4;
      color: rgb(3, 2, 2);
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
  <div id="container">
    <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>

Using property

You can customize the appearance of the column headers in Grid using the customAttributes property. The customAttributes property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the customAttributes property.

To customize the header of a column, you can follow the steps below:

Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this:

    .e-grid .e-headercell.customcss {
       background-color: rgb(43, 205, 226);
      color: black;
    }

Step 2: Set the customAttributes property of the desired column to an object that contains the CSS class customcss. This CSS class will be applied to the header cell of the specified column in the Grid.

  {field: "Freight" headerText: "Freight" customAttributes: {class: '.customcss'}}

The following example demonstrates how to customize the appearance of the OrderID and Freight columns using custom attributes.

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    {field: 'OrderID',headerText: 'Order ID',customAttributes: { class: 'customcss' },textAlign: 'Center'},
    { field: 'CustomerName', headerText: 'Customer Name', textAlign: 'Center'},
    {field: 'Freight',headerText: 'Freight',customAttributes: { class: 'customcss' },textAlign: 'Center'},
    {field: 'OrderDate',headerText: 'Order Date',format: 'yMd',textAlign: 'Center'}
  ],
});
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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
  <style>
    .e-grid .e-headercell.customcss {
      background-color: rgb(43, 205, 226);
      color: black;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="container">
    <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>

Using method

The Syncfusion Grid provides methods to customize the appearance of the grid columns header.

getColumnHeaderByIndex: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header.
getColumnHeaderByField: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element.
getColumnHeaderByUid: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element.
getColumnIndexByField:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance.
getColumnIndexByUid: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance.

Here’s an example of how to use these methods to change the style of a specific column header:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  dataBound: dataBound,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
    { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
  ],
  height: 315,
});
grid.appendTo('#Grid');

function dataBound() {
  grid.getColumnHeaderByIndex(0).style.color = '#0d0b0b';
  grid.getColumnHeaderByField('CustomerName').style.background = '#f45ddeab';
  grid.getColumnHeaderByField('CustomerName').style.color = '#0d0b0b';
  grid.getColumnHeaderByUid('grid-column2').style.background = '#f45ddeab';
  var columnIndex = grid.getColumnIndexByField('ShipCountry');
  grid.getColumnHeaderByIndex(columnIndex).style.color = '#0d0b0b';
  var index = grid.getColumnIndexByUid('grid-column2');
  grid.getColumnHeaderByIndex(index).style.color = '#0d0b0b';
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/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="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>

The unique identifier(UID) is automatically generated by the Grid control and may change whenever the grid is refreshed or updated.

Using event

To customize the appearance of the grid header, you can handle the headerCellInfo event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column.

The following example demonstrates how to add a headerCellInfo event handler to the grid. In the event handler, checked whether the current header column is Order Date field and then applied the appropriate CSS class to the cell based on its value.

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  allowPaging: true,
  headerCellInfo: onHeaderCellInfo,
  columns: [
    {field: 'OrderID',headerText: 'Order ID',width: 120,textAlign: 'Center'},
    {field: 'CustomerID', headerText: 'CustomerID', width: 150 },
    {field: 'OrderDate',headerText: 'Order Date',width: 130,format: 'yMd',textAlign: 'Center'},
    { field: 'Freight', headerText: 'Freight', width: 120,format: 'C2',textAlign: 'Center' },
    {field: 'ShippedDate', headerText: 'Shipped Date', width: '130',format: 'yMd',textAlign: 'Center'}
  ],
});
grid.appendTo('#Grid');

function onHeaderCellInfo(args) {
  if (args.cell.column.field == 'OrderDate') {
    args.node.classList.add('customcss');
  }
}
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
  <style>
    .e-grid .e-headercell.customcss {
      background-color: rgb(43, 205, 226);
      color: black;
    }
  </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="container">
    <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>

How to refresh header

The refresh header feature in the Syncfusion EJ2 JavaScript Grid allows you to update the header section of the grid whenever changes are made to the grid’s columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.

To use the refresh header feature, you can call the refreshHeader method of the Grid control. This method updates the grid header with the latest changes made to the columns.

The following example demonstrates how to use the refreshHeader method to update the grid header:

index.js
index.html
var grid = new ej.grids.Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 100, },
    { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd' },
    { field: 'Freight', headerText: 'Freight', width: 120 }
  ],
  height: 280,
});
grid.appendTo('#Grid');

var button = new ej.buttons.Button({
  content: 'Refresh Header',
});
button.appendTo('#buttons');

document.getElementById('buttons').onclick = function () {
  var column = grid.getColumnByIndex(1);
  column.headerText = 'New Header Text'; // update the header text of the column object
  grid.refreshHeader();
};
<!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/28.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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 style="padding-bottom: 10px">
            <button ejs-button id="buttons" cssClass="e-small"></button>
            </br></br>
            <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>

The refreshHeader method updates only the grid header and not the entire grid.

If you want to refresh the entire grid, you can use the refresh method instead.

How to get header element

To get the header element in a Syncfusion Grid, you can use one of the following methods:

1.getHeaderContent: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid.

    const headerElement = grid.getHeaderContent();

2.getHeaderTable: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid.

    const headerTableElement = grid.getHeaderTable();

3.getColumnHeaderByUid: This method returns the column header element by its unique identifier.

    const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2");

4.getColumnHeaderByIndex: This method returns the column header element by its index.

    const columnHeaderElement = grid.getColumnHeaderByIndex(0);

5.getColumnHeaderByField: This method returns the column header element by its field name.

    const columnHeaderElement = grid.getColumnHeaderByField("OrderID");