Available in the Full Version

Data Grid - Multi-Row Layout Editing

This sample demonstrates the inline editing functionality of a Multi-Row Layout grid, which makes it possible to define a more complex structure in which to present the data. The Мulti-Row Layout is defined using rowIndex, columnIndex, rowSpan and colSpan attributes in the column collection.
Show
records
Product IDProduct NameProduct NumberSafety Stock LevelSell Start DateModified Date
ColorList Price
Add new row
717HL Road Frame - Red, 62FR-R92R-625007/1/20013/11/2004
Color:
1431.5
718HL Road Frame - Red, 44FR-R92R-445007/1/20013/11/2004
Color:
1431.5
719HL Road Frame - Red, 48FR-R92R-485007/1/20013/11/2004
Color:
1431.5
720HL Road Frame - Red, 52FR-R92R-525007/1/20013/11/2004
Color:
1431.5
721HL Road Frame - Red, 56FR-R92R-565007/1/20013/11/2004
Color:
1431.5

Grid edit mode:

In order to change igGrid`s edit mode please select a value from the drop down menu below.

This sample is designed for a larger screen size.

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

Users also may define a custom order in which cells are traversed in edit mode using the navigationIndex property of columns in the column collection. The numbers assigned should range from 0 to the number of columns -1 and should not repeat. Columns that don't have navigationIndex specified will be traversed in the order of the normal browser TAB sequence. The sample demonstrates one such custom order.

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/adventureworks.min.js"></script>
</head>
<body>
	<table id="grid-mrl"></table>
	<br />
	<div>
		<h3>Grid edit mode:</h3>
		<hr />
		<p style="font-size: 15px; color: #5F6564; margin-top: 1em; margin-bottom: 1em;">
			In order to change igGrid`s edit mode please select a value from the drop down menu below.
		</p>
		<div id="editModeCombo"></div>
	</div>
	<script>
		var editModes = [
			{ "ID": 1, "EditMode": "cell" },
			{ "ID": 2, "EditMode": "dialog" },
			{ "ID": 3, "EditMode": "row" },
		];
		$(function () {
			$("#grid-mrl").igGrid({
				dataSource: adventureWorks.slice(221, 250),
				autoCommit: true,
				width: "100%",
				autoGenerateColumns: false,
				primaryKey: "ProductID",
				columns: [
					{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0, rowSpan: 2, width: "0%", navigationIndex: 0 },
					{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, width: "15%", navigationIndex: 1 },
					{ headerText: "Product Number", key: "ProductNumber", dataType: "string", rowIndex: 0, columnIndex: 2, width: "10%", navigationIndex: 2 },
					{ headerText: "Safety Stock Level", key: "SafetyStockLevel", dataType: "number", rowIndex: 0, columnIndex: 3, width: "10%", navigationIndex: 4 },
					{ headerText: "Sell Start Date", key: "SellStartDate", dataType: "date", rowIndex: 0, columnIndex: 4, rowSpan: 2, width: "15%", navigationIndex: 6 },
					{ headerText: "Modified Date", key: "ModifiedDate", dataType: "date", rowIndex: 0, columnIndex: 5, rowSpan: 2, width: "15%", navigationIndex: 7 },
					{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1, colSpan: 2, template: "<span><b> Color: </b></span><div style='width:15px; height: 15px; background-color: ${Color}; border-style:solid; display:inline-block; margin-left: 5px; position: relative; top: 7px; '></div>", navigationIndex: 3 },
					{ headerText: "List Price", key: "ListPrice", dataType: "number", rowIndex: 1, columnIndex: 3, colSpan: 1, navigationIndex: 5 }
				],
				autofitLastColumn: false,
				features: [
					{
						name: "Paging",
						pageSize: 5
					},
					{
						name: "Updating",
						editMode: "dialog",
						columnSettings: [
							{
								columnKey: "ProductID",
								readOnly: true
							},
							{
								columnKey: "SellStartDate",
								readOnly: true
							},
							{
								columnKey: "ModifiedDate",
								readOnly: true
							},
						],
						rowEditDialogOptions: {
							showReadonlyEditors: false
						}
					}
				]
			});
			$("#editModeCombo").igCombo({
				dataSource: editModes,
                valueKey: "ID",
                mode: "dropdown",
				textKey: "EditMode",
				initialSelectedItems: [
					{ index: 1 }
				],
				selectionChanged: function (evt, ui) {
					var newEditMode = ui.items[0].data.EditMode;
					changeGridEditMode(newEditMode);
				}
			});
			function changeGridEditMode(newEditMode) {
				$("#grid-mrl").igGridUpdating("option", "editMode", newEditMode);
				$("#grid-mrl").igGrid("dataBind");
			}
		});
</script>
</body>
</html>