Available in the Full Version

Data Grid - Collapsible Columns

Collapsible Column Groups is a part of the multi-column headers feature that provides a way to collapse or expand a column group to show a smaller set of data. This sample has three multi-column header columns with collapsible groups. "Company Information" and "Phone Information" have two levels, while "Address Information" has three levels.
Company Information
Address Information
Phone Information
Company Name
Contact Name
Contact Title
Local Address		Postal Code
Phone
Fax
Address
City
Alfreds FutterkisteMaria Anders
Sales Representative
Obere Str. 57Berlin12209
030-0074321
030-0076545
Ana Trujillo Emparedados y heladosAna Trujillo
Owner
Avda. de la Constitución 2222México D.F.05021
(5) 555-4729
(5) 555-3745
Antonio Moreno TaqueríaAntonio Moreno
Owner
Mataderos 2312México D.F.05023
(5) 555-3932
 
Around the HornThomas Hardy
Sales Representative
120 Hanover Sq.LondonWA1 1DP
(171) 555-7788
(171) 555-6750
Berglunds snabbköpChristina Berglund
Order Administrator
Berguvsvägen 8LuleåS-958 22
0921-12 34 65
0921-12 34 67
Blauer See DelikatessenHanna Moos
Sales Representative
Forsterstr. 57Mannheim68306
0621-08460
0621-08924
Blondesddsl père et filsFrédérique Citeaux
Marketing Manager
24, place KléberStrasbourg67000
88.60.15.31
88.60.15.32
Bólido Comidas preparadasMartín Sommer
Owner
C/ Araquil, 67Madrid28023
(91) 555 22 82
(91) 555 91 99
Bon app'Laurence Lebihan
Owner
12, rue des BouchersMarseille13008
91.24.45.40
91.24.45.41
Bottom-Dollar MarketsElizabeth Lincoln
Accounting Manager
23 Tsawassen Blvd.TsawassenT2F 8M4
(604) 555-4729
(604) 555-3745
B's BeveragesVictoria Ashworth
Sales Representative
Fauntleroy CircusLondonEC2 5NT
(171) 555-1212
 
Cactus Comidas para llevarPatricio Simpson
Sales Agent
Cerrito 333Buenos Aires1010
(1) 135-5555
(1) 135-4892
Centro comercial MoctezumaFrancisco Chang
Marketing Manager
Sierras de Granada 9993México D.F.05022
(5) 555-3392
(5) 555-7293
Chop-suey ChineseYang Wang
Owner
Hauptstr. 29Bern3012
0452-076545
 
Comércio MineiroPedro Afonso
Sales Associate
Av. dos Lusíadas, 23Sao Paulo05432-043
(11) 555-7647
 
Consolidated HoldingsElizabeth Brown
Sales Representative
Berkeley Gardens 12 BreweryLondonWX1 6LT
(171) 555-2282
(171) 555-9199
Drachenblut DelikatessenSven Ottlieb
Order Administrator
Walserweg 21Aachen52066
0241-039123
0241-059428
Du monde entierJanine Labrune
Owner
67, rue des Cinquante OtagesNantes44000
40.67.88.88
40.67.89.89
Eastern ConnectionAnn Devon
Sales Agent
35 King GeorgeLondonWX3 6FW
(171) 555-0297
(171) 555-3373
Ernst HandelRoland Mendel
Sales Manager
Kirchgasse 6Graz8010
7675-3425
7675-3426
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

	<script id="colTmpl" type="text/template">
		{{if ${ContactTitle} === "Sales Representative" }}
			<div class='blueCell'>${ContactTitle}</div>
		{{elseif ${ContactTitle} === "Owner"}} 
			<div class='redCell'>${ContactTitle}</div>
		{{else}}
			<div class='greenCell'>${ContactTitle}</div>
		{{/if}}
	</script>
	<script id="colTmpl1" type="text/template">
		{{if ${ContactTitle} === "Sales Representative" }}
		<div class='blueCell'>${Phone}</div>
		{{elseif ${ContactTitle} === "Owner"}}
		<div class='redCell'>${Phone}</div>
		{{else}}
		<div class='greenCell'>${Phone}</div>
		{{/if}}
	</script>
</head>
<body>
	<table id="grid1"></table>
	<script src="/data-files/nw-customers.js"></script>
	<script>
		function colorizeColumn(cellClass, color) {
			$("." + cellClass + "Cell").css("color", color);
		}
		$(function () {
			$("#grid1").igGrid({
				width: "100%",
				height: "500px",
				autoGenerateColumns: false,
				dataSource: nwCustomers,
				responseDataKey: "results",
				rowsRendered: function(evt, ui) {
					colorizeColumn("blue", "#0234d7");
					colorizeColumn("green", "#0e9d5f");
					colorizeColumn("red", "#ff6a00");
				},
				columns: [
					{
						headerText: "Company Information",
						group: [
							{
								headerText: "Company Name",
								key: "CompanyName",
								dataType: "string",
								width: "150px"
							},
							{
								headerText: "Contact Name",
								key: "ContactName",
								dataType: "string",
								width: "150px",
								groupOptions: {
									hidden: "parentcollapsed"
								}
							},
							{
								headerText: "Contact Title",
								key: "ContactTitle",
								dataType: "string",
								width: "200px",
								template: $( "#colTmpl" ).html(),
								groupOptions: {
									hidden: "parentcollapsed"
								}
							}
						],
						groupOptions: {
							expanded: true,
							allowGroupCollapsing: true
						}
					},
					{
						headerText: "Address Information",
						group: [
							{
								headerText: "Local Address",
								group: [
									{
										headerText: "Address",
										key: "Address",
										dataType: "string",
										width: "150px"
									},
									{
										headerText: "City",
										key: "City",
										dataType: "string",
										width: "100px",
										groupOptions: {
											hidden: "parentcollapsed"
										}
									}
								],
								groupOptions: {
									expanded: true,
									allowGroupCollapsing: true,
									hidden: "parentcollapsed"
								}
							},
							{
								headerText: "Postal Code",
								key: "PostalCode",
								dataType: "string",
								width: "100px",
								groupOptions: {
									hidden: "parentcollapsed"
								}
							},
							{
								headerText: "Full Address",
								width: "200px",
								key: "FullAddress",
								dataType: "string",
								unbound: true,
								formula: function (data, grid) {
									return data["Address"] + ", " + data["City"];
								},
								groupOptions: {
									hidden: "parentexpanded"
								}
							}
						],
						groupOptions: {
							expanded: true,
							allowGroupCollapsing: true
						}
					},
					{
						headerText: "Phone Information",
						group: [
							{ headerText: "Phone", key: "Phone", dataType: "string", width: "150px", template: $("#colTmpl1").html() },
							{
								headerText: "Fax",
								key: "Fax",
								dataType: "string",
								width: "150px",
								groupOptions: {
									hidden: "parentcollapsed"
								}
							}
						],
						groupOptions: {
							expanded: true,
							allowGroupCollapsing: true
						}
					}
				],
				features: [
					{
						name: 'MultiColumnHeaders'
					},
					{
						name: 'Responsive',
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: 'CustomerID',
								classes: 'ui-hidden-phone ui-hidden-tablet'
							}
						]
					},
					{
						name: "ColumnMoving"
					},
					{
						name: "Sorting"
					}
				]
			});
		});
	</script>
</body>
</html>