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.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>
var nwCustomers = {
"results": [{
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constituci\u00f3n 2222",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANTON",
"CompanyName": "Antonio Moreno Taquer\u00eda",
"ContactName": "Antonio Moreno",
"ContactTitle": "Owner",
"Address": "Mataderos 2312",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05023",
"Country": "Mexico",
"Phone": "(5) 555-3932",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "AROUT",
"CompanyName": "Around the Horn",
"ContactName": "Thomas Hardy",
"ContactTitle": "Sales Representative",
"Address": "120 Hanover Sq.",
"City": "London",
"Region": null,
"PostalCode": "WA1 1DP",
"Country": "UK",
"Phone": "(171) 555-7788",
"Fax": "(171) 555-6750",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BERGS",
"CompanyName": "Berglunds snabbk\u00f6p",
"ContactName": "Christina Berglund",
"ContactTitle": "Order Administrator",
"Address": "Berguvsv\u00e4gen 8",
"City": "Lule\u00e5",
"Region": null,
"PostalCode": "S-958 22",
"Country": "Sweden",
"Phone": "0921-12 34 65",
"Fax": "0921-12 34 67",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLAUS",
"CompanyName": "Blauer See Delikatessen",
"ContactName": "Hanna Moos",
"ContactTitle": "Sales Representative",
"Address": "Forsterstr. 57",
"City": "Mannheim",
"Region": null,
"PostalCode": "68306",
"Country": "Germany",
"Phone": "0621-08460",
"Fax": "0621-08924",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLONP",
"CompanyName": "Blondesddsl p\u00e8re et fils",
"ContactName": "Fr\u00e9d\u00e9rique Citeaux",
"ContactTitle": "Marketing Manager",
"Address": "24, place Kl\u00e9ber",
"City": "Strasbourg",
"Region": null,
"PostalCode": "67000",
"Country": "France",
"Phone": "88.60.15.31",
"Fax": "88.60.15.32",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOLID",
"CompanyName": "B\u00f3lido Comidas preparadas",
"ContactName": "Mart\u00edn Sommer",
"ContactTitle": "Owner",
"Address": "C/ Araquil, 67",
"City": "Madrid",
"Region": null,
"PostalCode": "28023",
"Country": "Spain",
"Phone": "(91) 555 22 82",
"Fax": "(91) 555 91 99",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BONAP",
"CompanyName": "Bon app'",
"ContactName": "Laurence Lebihan",
"ContactTitle": "Owner",
"Address": "12, rue des Bouchers",
"City": "Marseille",
"Region": null,
"PostalCode": "13008",
"Country": "France",
"Phone": "91.24.45.40",
"Fax": "91.24.45.41",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOTTM",
"CompanyName": "Bottom-Dollar Markets",
"ContactName": "Elizabeth Lincoln",
"ContactTitle": "Accounting Manager",
"Address": "23 Tsawassen Blvd.",
"City": "Tsawassen",
"Region": "BC",
"PostalCode": "T2F 8M4",
"Country": "Canada",
"Phone": "(604) 555-4729",
"Fax": "(604) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BSBEV",
"CompanyName": "B's Beverages",
"ContactName": "Victoria Ashworth",
"ContactTitle": "Sales Representative",
"Address": "Fauntleroy Circus",
"City": "London",
"Region": null,
"PostalCode": "EC2 5NT",
"Country": "UK",
"Phone": "(171) 555-1212",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CACTU",
"CompanyName": "Cactus Comidas para llevar",
"ContactName": "Patricio Simpson",
"ContactTitle": "Sales Agent",
"Address": "Cerrito 333",
"City": "Buenos Aires",
"Region": null,
"PostalCode": "1010",
"Country": "Argentina",
"Phone": "(1) 135-5555",
"Fax": "(1) 135-4892",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CENTC",
"CompanyName": "Centro comercial Moctezuma",
"ContactName": "Francisco Chang",
"ContactTitle": "Marketing Manager",
"Address": "Sierras de Granada 9993",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05022",
"Country": "Mexico",
"Phone": "(5) 555-3392",
"Fax": "(5) 555-7293",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CHOPS",
"CompanyName": "Chop-suey Chinese",
"ContactName": "Yang Wang",
"ContactTitle": "Owner",
"Address": "Hauptstr. 29",
"City": "Bern",
"Region": null,
"PostalCode": "3012",
"Country": "Switzerland",
"Phone": "0452-076545",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "COMMI",
"CompanyName": "Com\u00e9rcio Mineiro",
"ContactName": "Pedro Afonso",
"ContactTitle": "Sales Associate",
"Address": "Av. dos Lus\u00edadas, 23",
"City": "Sao Paulo",
"Region": "SP",
"PostalCode": "05432-043",
"Country": "Brazil",
"Phone": "(11) 555-7647",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CONSH",
"CompanyName": "Consolidated Holdings",
"ContactName": "Elizabeth Brown",
"ContactTitle": "Sales Representative",
"Address": "Berkeley Gardens 12 Brewery",
"City": "London",
"Region": null,
"PostalCode": "WX1 6LT",
"Country": "UK",
"Phone": "(171) 555-2282",
"Fax": "(171) 555-9199",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DRACD",
"CompanyName": "Drachenblut Delikatessen",
"ContactName": "Sven Ottlieb",
"ContactTitle": "Order Administrator",
"Address": "Walserweg 21",
"City": "Aachen",
"Region": null,
"PostalCode": "52066",
"Country": "Germany",
"Phone": "0241-039123",
"Fax": "0241-059428",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DUMON",
"CompanyName": "Du monde entier",
"ContactName": "Janine Labrune",
"ContactTitle": "Owner",
"Address": "67, rue des Cinquante Otages",
"City": "Nantes",
"Region": null,
"PostalCode": "44000",
"Country": "France",
"Phone": "40.67.88.88",
"Fax": "40.67.89.89",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "EASTC",
"CompanyName": "Eastern Connection",
"ContactName": "Ann Devon",
"ContactTitle": "Sales Agent",
"Address": "35 King George",
"City": "London",
"Region": null,
"PostalCode": "WX3 6FW",
"Country": "UK",
"Phone": "(171) 555-0297",
"Fax": "(171) 555-3373",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ERNSH",
"CompanyName": "Ernst Handel",
"ContactName": "Roland Mendel",
"ContactTitle": "Sales Manager",
"Address": "Kirchgasse 6",
"City": "Graz",
"Region": null,
"PostalCode": "8010",
"Country": "Austria",
"Phone": "7675-3425",
"Fax": "7675-3426",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/CustomerDemographics"
}
}
}]
};