Available in the Full Version

Data Grid - GroupBy

This sample demonstrates the grouping feature of igGrid control. To group columns, drag each column indicator to the Group By area at the top.
Drag a column here or select columns to Group By
  • Ship Country
Ship Country
Order Date
Ship Name
Ship City
Customer City
Unit Price
Discount
 
Ship Country: Argentina (3) Order Date After 8/1/1996: 3/1/2001
Argentina4/29/1997Cactus Comidas para llevarBuenos AiresBuenos Aires12.50
Argentina4/28/1998Cactus Comidas para llevarBuenos AiresBuenos Aires2.50
Argentina4/28/1998Cactus Comidas para llevarBuenos AiresBuenos Aires140
Sum = 29
Sum = 0
Ship Country: Austria (102) Order Date After 8/1/1996: 1/1/1995
Austria7/23/1996Ernst HandelGrazGraz3.60
Austria11/11/1996Ernst HandelGrazGraz7.70
Austria11/29/1996Ernst HandelGrazGraz15.60
Austria12/13/1996Ernst HandelGrazGraz170
Austria12/13/1996Ernst HandelGrazGraz500
Austria12/13/1996Ernst HandelGrazGraz990
Austria12/13/1996Ernst HandelGrazGraz20
Austria12/13/1996Ernst HandelGrazGraz80
Austria12/23/1996Ernst HandelGrazGraz9.60
Austria1/2/1997Ernst HandelGrazGraz7.20
Austria1/2/1997Ernst HandelGrazGraz35.10
Austria1/30/1997Ernst HandelGrazGraz80
Austria1/30/1997Ernst HandelGrazGraz30.40
Austria2/11/1997Ernst HandelGrazGraz16.80
Austria2/11/1997Ernst HandelGrazGraz5.90
Austria2/11/1997Ernst HandelGrazGraz13.60
Austria4/22/1997Ernst HandelGrazGraz810
Austria4/22/1997Ernst HandelGrazGraz45.60
Austria4/22/1997Ernst HandelGrazGraz380
Austria4/22/1997Ernst HandelGrazGraz21.050
Austria4/22/1997Ernst HandelGrazGraz7.750
Austria10/9/1997Ernst HandelGrazGraz210
Austria12/10/1997Ernst HandelGrazGraz21.50
Austria12/11/1997Ernst HandelGrazGraz390
Austria12/24/1997Ernst HandelGrazGraz17.450
Austria1/16/1998Ernst HandelGrazGraz210
Austria1/16/1998Ernst HandelGrazGraz180
Austria1/16/1998Ernst HandelGrazGraz19.50
Austria1/16/1998Ernst HandelGrazGraz340
Austria1/16/1998Ernst HandelGrazGraz33.250
Austria2/18/1998Ernst HandelGrazGraz4.50
Austria2/18/1998Ernst HandelGrazGraz180
Austria2/18/1998Ernst HandelGrazGraz18.40
Austria2/18/1998Ernst HandelGrazGraz340
Austria3/23/1998Ernst HandelGrazGraz380
Austria3/23/1998Ernst HandelGrazGraz4.50
Austria3/23/1998Ernst HandelGrazGraz33.250
Austria3/26/1998Ernst HandelGrazGraz300
Austria3/26/1998Ernst HandelGrazGraz380
Austria3/26/1998Ernst HandelGrazGraz4.50
Austria3/26/1998Ernst HandelGrazGraz43.90
Austria3/26/1998Ernst HandelGrazGraz12.50
Austria3/26/1998Ernst HandelGrazGraz43.90
Austria4/1/1998Ernst HandelGrazGraz100
Austria4/8/1998Ernst HandelGrazGraz21.50
Austria4/13/1998Ernst HandelGrazGraz100
Austria4/13/1998Ernst HandelGrazGraz550
Austria4/13/1998Ernst HandelGrazGraz150
Austria5/5/1998Ernst HandelGrazGraz190
Austria5/5/1998Ernst HandelGrazGraz9.650
Austria5/5/1998Ernst HandelGrazGraz16.250
Austria5/5/1998Ernst HandelGrazGraz33.250
Austria11/11/1996Ernst HandelGrazGraz210.80.05
Austria11/11/1996Ernst HandelGrazGraz15.50.05
Austria11/11/1996Ernst HandelGrazGraz16.80.05
Austria10/9/1997Ernst HandelGrazGraz390.05
Austria10/9/1997Ernst HandelGrazGraz123.790.05
Austria10/9/1997Ernst HandelGrazGraz21.050.05
Austria10/9/1997Ernst HandelGrazGraz150.05
Austria12/15/1997Ernst HandelGrazGraz12.50.05
Austria12/15/1997Ernst HandelGrazGraz140.05
Austria12/15/1997Ernst HandelGrazGraz9.50.05
Austria12/15/1997Ernst HandelGrazGraz530.05
Austria4/8/1998Ernst HandelGrazGraz45.60.05
Austria4/8/1998Ernst HandelGrazGraz140.05
Austria11/29/1996Ernst HandelGrazGraz80.1
Austria11/29/1996Ernst HandelGrazGraz36.40.1
Austria11/29/1996Ernst HandelGrazGraz26.60.1
Austria12/23/1996Ernst HandelGrazGraz100.1
Austria12/23/1996Ernst HandelGrazGraz14.40.1
Austria12/23/1996Ernst HandelGrazGraz27.80.1
Austria12/3/1997Ernst HandelGrazGraz100.1
Austria12/3/1997Ernst HandelGrazGraz180.1
Austria1/3/1997Ernst HandelGrazGraz13.90.15
Austria1/3/1997Ernst HandelGrazGraz10.20.15
Austria6/17/1997Ernst HandelGrazGraz23.250.15
Austria6/17/1997Ernst HandelGrazGraz140.15
Austria8/15/1997Ernst HandelGrazGraz380.15
Austria8/15/1997Ernst HandelGrazGraz60.15
Austria8/15/1997Ernst HandelGrazGraz31.230.15
Austria8/15/1997Ernst HandelGrazGraz49.30.15
Austria1/27/1998Ernst HandelGrazGraz310.15
Austria1/27/1998Ernst HandelGrazGraz60.15

This sample is designed for a larger screen size.

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

You can configure initial grouping on a per column basis using the columnSettings option. Each group row also can contain custom information about the group (a summary). For example, in this sample, the group row will show the number of orders placed after 8/1/1996 for each separate group. The initialExpand option controls the expansion of the groups after a grouping. By default, the grouped column is sorted in ascending order. Change the sorting order by clicking on the grouped column indicator. To ungroup a column, click on the X icon of the grouped column indicator.

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>
</head>
<body>
	<table id="grid"></table>
	<script src="/data-files/nw-invoices.js"></script>
	<script>
		$(function () {
			$("#grid").igGrid({
				autoGenerateColumns: false,
				width: "100%",
				height: "500px",
			    rowVirtualization: true,
			    virtualizationMode: "continuous",
				columns: [
					{ headerText: "Order ID", key: "OrderID", dataType: "number", width: "0%", hidden: true },
					{ headerText: "Ship Country", key: "ShipCountry", dataType: "string", width: "12%" },
					{ headerText: "Order Date", key: "OrderDate", dataType: "date", width: "18%" },
					{ headerText: "Ship Name", key: "ShipName", dataType: "string", width: "14%" },
					{ headerText: "Ship City", key: "ShipCity", dataType: "string", width: "13%" },
					{ headerText: "Customer City", key: "City", dataType: "string", width: "13%" },
					{ headerText: "Unit Price", key: "UnitPrice", dataType: "number", width: "17%" },
					{ headerText: "Discount", key: "Discount", dataType: "number", width: "13%" },
				],
				dataSource: northwindInvoices,
				features: [
					{
						name: 'GroupBy',
						groupByDialogContainment: "window",
						groupSummaries: [
							{
								summaryFunction: "Sum", label: "Sum = ", format: ".##"
							}
						],
						columnSettings: [
							{
								columnKey: "ShipCountry",
								isGroupBy: true
							},
							{
								columnKey: "OrderDate",
								summaries: [
									{
										summaryFunction: "custom",
										text: "After 8/1/1996:",
										customSummary: function (data) {
											var count = 0, date = new Date(1996, 7, 1);
											$.map(data.array, function (d) {
												if (d > date) {
													count++;
												}
											});
											return count.toFixed(0);
										}
									}
								]
							}
						],
						summarySettings: {
							summaryFormat: "#"
						}
					},
					{
						name: "Filtering"
					},
					{
						name: "CellMerging"
					}
				]
			});
		});
	</script>
</body>
</html>