Stacked Headers

17 May 20181 minute to read

The stacked headers helps you to group the logical columns in the Grid. It can be shown by setting the showStackedHeader as true and by defining the stackedHeaderRows.

Adding stacked header columns

To stack columns in stacked header, you need to define the column property in the stackedHeaderColumns with field names of visible columns.

You can also define the cssClass, headerText , textAlign and tooltip properties in the stackedHeaderColumns .

HTML

<div id="Grid"></div>

<script type="text/javascript">

$("#Grid").ejGrid({

// the datasource "window.gridData" is referred from jsondata.min.js
	dataSource: window.gridData,
	showStackedHeader: true,
	stackedHeaderRows: [{ stackedHeaderColumns: 
		[
			{headerText: "Order Details",column: "OrderID,OrderDate,Freight"},
			{headerText: "Ship Details",column: "ShipName,ShipCity,ShipCountry"}
			]
		}],
	columns: 
	[
		{field: "OrderID",headerText: "Order ID",width: 80},
		{field: "OrderDate",headerText: "Order Date",width: 80,format: "{0:MM/dd/yyyy}",textAlign: ej.TextAlign.Right},
		{field: "Freight",width: 75,format: "{0:C}",textAlign: ej.TextAlign.Right},
		{field: "ShipName",headerText: "Ship Name",width: 110},
		{field: "ShipCity",headerText: "Ship City",width: 110},
		{field: "ShipCountry",headerText: "Ship Country",width: 110}
	]
});

</script>