Available in the Full Version

Data Grid - Multi-Row Layout

Show
records
Company
Lifetime Sales
Market Potential
Assets Cash
Accounts Receivable
Country
City
Assets Books
Address
Quarterly
Yearly
Add new row
Sportan40882580.184210805124.61264714.7163084.44
VUOceola7534.74
Rapelye Street430845.781197420.17
Bugsall29231147.892505447478.96370690.3969242.24
FMRosine12507.92
Hoyt Street227299.971486467.06
Hydrocom35628528.184930069033.99403038.6456183.05
KECornfields8113.52
Sunnyside Court226007.911092555.78
Eclipto20178683.422488740024.16237368.7650048.48
TZOrin13100.31
Remsen Avenue319645.811249194.57
Paprikut25575955.421923959087.58235064.5774596.25
LRMotley17057.85
Bay Parkway347046.851611555.66

This sample is designed for a larger screen size.

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

This sample demonstrates how to setup an igGrid with a Multi-Row Layout. The Мulti-Row Layout is defined using rowIndex, columnIndex, rowSpan and colSpan attributes in the column collection, which allow defining a more complex structure for presenting the data. This layout has support for the following grid features:
  • Filtering (advanced filtering mode only)
  • Sorting
  • Updating
  • Paging
  • Row Virtualization (only with virtualizationMode - "continuous")

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>
	<!--Sample JSON Data-->
	<script src="/data-files/company-data.js"></script>
</head>
<body>
	<table id="grid-mrl"></table>

	<script>
		$(function () {
			$("#grid-mrl").igGrid({
				dataSource: data,
				autoCommit: true,
				width: "100%",
				autoGenerateColumns: false,
				primaryKey: "company",
				columns: [
					{ headerText: "Company", key: "company", dataType: "string", rowIndex: 0, columnIndex: 0, colSpan: 2 },
					{ headerText: "Lifetime Sales", key: "sales_lifetimeSales", dataType: "number", rowIndex: 0, columnIndex: 2, colSpan: 2, rowSpan: 2 },
					{ headerText: "Market Potential", key: "sales_marketPotential", dataType: "number", rowIndex: 0, columnIndex: 4, rowSpan: 3, width: "10%" },
					{ headerText: "Assets Cash", key: "assets_cash", dataType: "number", rowIndex: 0, columnIndex: 5, width: "10%" },
					{ headerText: "Accounts Receivable", key: "assets_accRec", dataType: "number", rowIndex: 0, columnIndex: 6, width: "20%" },
					{ headerText: "Country", key: "country", dataType: "string", rowIndex: 1, columnIndex: 0, width: "10%" },
					{ headerText: "City", key: "city", dataType: "string", rowIndex: 1, columnIndex: 1, width: "10%" },
					{ headerText: "Assets Books", key: "assets_books", dataType: "number", rowIndex: 1, columnIndex: 5, colSpan: 2, rowSpan: 2 },
					{ headerText: "Address", key: "address", dataType: "string", rowIndex: 2, columnIndex: 0, colSpan: 2 },
					{ headerText: "Quarterly", key: "sales_quarterlySales", dataType: "number", rowIndex: 2, columnIndex: 2, width: "10%" },
					{ headerText: "Yearly", key: "sales_yearlySales", dataType: "number", rowIndex: 2, columnIndex: 3, width: "10%" }
				],
				autofitLastColumn: false,
				features: [
					{ name: "Paging", pageSize: 5 },
					{
						name: "Updating",
						editMode: "dialog"
					},
					{
						name: "Filtering",
						mode: "advanced"
					}, {
						name: "Sorting"
					}
				]
			});
		});
</script>
</body>
</html>