Available in the Full Version

Data Grid - Selection

This sample demonstrates the Selection feature for the igGrid and it's cell and row mode.

Single Cell Selection

Employee IDNameTitlePhone
1Davolio, NancySales Representative(206) 555-9857
2Fuller, AndrewVice President, Sales(206) 555-9482
3Leverling, JanetSales Representative(206) 555-3412
4Peacock, MargaretSales Representative(206) 555-8122
5Buchanan, StevenSales Manager(71) 555-4848
6Suyama, MichaelSales Representative(71) 555-7773
7King, RobertSales Representative(71) 555-5598
8Callahan, LauraInside Sales Coordinator(206) 555-1189
9Dodsworth, AnneSales Representative(71) 555-4444
 

Multiple Cell Selection

Employee IDNameTitlePhone
1Davolio, NancySales Representative(206) 555-9857
2Fuller, AndrewVice President, Sales(206) 555-9482
3Leverling, JanetSales Representative(206) 555-3412
4Peacock, MargaretSales Representative(206) 555-8122
5Buchanan, StevenSales Manager(71) 555-4848
6Suyama, MichaelSales Representative(71) 555-7773
7King, RobertSales Representative(71) 555-5598
8Callahan, LauraInside Sales Coordinator(206) 555-1189
9Dodsworth, AnneSales Representative(71) 555-4444
 

Multiple Row Selection

Employee IDNameTitlePhone
1Davolio, NancySales Representative(206) 555-9857
2Fuller, AndrewVice President, Sales(206) 555-9482
3Leverling, JanetSales Representative(206) 555-3412
4Peacock, MargaretSales Representative(206) 555-8122
5Buchanan, StevenSales Manager(71) 555-4848
6Suyama, MichaelSales Representative(71) 555-7773
7King, RobertSales Representative(71) 555-5598
8Callahan, LauraInside Sales Coordinator(206) 555-1189
9Dodsworth, AnneSales Representative(71) 555-4444
 

Multiple Row Selection with Row Selectors

Show
records
Employee IDNameTitlePhone
1Davolio, NancySales Representative(206) 555-9857
2Fuller, AndrewVice President, Sales(206) 555-9482
3Leverling, JanetSales Representative(206) 555-3412
4Peacock, MargaretSales Representative(206) 555-8122
5Buchanan, StevenSales Manager(71) 555-4848
 

This sample is designed for a larger screen size.

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

Cell mode allows you to select individual or multiple cells. Row mode allows you to select individual or multiple rows. Each mode can be configured for single or multiple selection by setting the multipleSelection to true. The top grid is configured in single cell selection mode. The bottom grid is configured in multiple row selection mode.

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>
	<h3>Single Cell Selection</h3>
	<!-- Target element for the CellSelection igGrid -->
	 <table id="singleCellSelectionGrid"></table>
	<br />
	<h3>Multiple Cell Selection</h3>
	<!-- Target element for the CellSelection igGrid -->
	<table id="multipleCellSelectionGrid"></table>
	<br />
	 <h3>Multiple Row Selection</h3>
	<!-- Target element for the RowSelection igGrid -->
	<table id="rowSelectionGrid"></table>
	<br />
	<h3>Multiple Row Selection with Row Selectors</h3>
	<!-- Target element for the RowSelection igGrid -->
	<table id="rowSelectionRowSelectorsGrid"></table>

	<!--Sample JSON Data-->
	<script src="/data-files/nw-employees.js"></script>

	<script>
	$(function () {
			createSingleCellSelectionGrid();
			createMultipleCellSelectionGrid();
			createRowSelectionGrid();
			createRowSelectionRowSelectorsGrid();
	});
		
	function createSingleCellSelectionGrid() {
		$("#singleCellSelectionGrid").igGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwindEmployees,
				responseDataKey: "results",
				dataSourceType: "json",
				columns: [
					{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
					{ headerText: "Name", key: "Name", dataType: "string" },
					{ headerText: "Title", key: "Title", dataType: "string" },
					{ headerText: "Phone", key: "Phone", dataType: "string" }
				],
				features: [
					{
						name: 'Responsive',
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: 'ID',
								classes: 'ui-hidden-phone'
							}
						]
					},
					{
						name: "Selection",
						mode: "cell",
						multipleSelection: false,
						touchDragSelect: false, // this is true by default
						multipleCellSelectOnClick: false
					}
				]
		});
	}
	function createMultipleCellSelectionGrid() {
		$("#multipleCellSelectionGrid").igGrid({
			width: "100%",
			autoGenerateColumns: false,
			dataSource: northwindEmployees,
			responseDataKey: "results",
			dataSourceType: "json",
			columns: [
				{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
				{ headerText: "Name", key: "Name", dataType: "string" },
				{ headerText: "Title", key: "Title", dataType: "string" },
				{ headerText: "Phone", key: "Phone", dataType: "string" }
			],
			features: [
					{
						name: 'Responsive',
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: 'ID',
								classes: 'ui-hidden-phone'
							}
						]
					},
					{
						name: "Selection",
						mode: "cell",
						multipleSelection: true,
						touchDragSelect: false, // this is true by default
						multipleCellSelectOnClick: false,
						allowMultipleRangeSelection: true
					}
			]
		});
	}

	function createRowSelectionGrid() {
		$("#rowSelectionGrid").igGrid({
			width: "100%",
			autoGenerateColumns: false,
			dataSource: northwindEmployees,
			responseDataKey: "results",
			dataSourceType: "json",
			columns: [
				{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
				{ headerText: "Name", key: "Name", dataType: "string" },
				{ headerText: "Title", key: "Title", dataType: "string" },
				{ headerText: "Phone", key: "Phone", dataType: "string" }
			],
			features: [
				{
					name: 'Responsive',
					enableVerticalRendering: false,
					columnSettings: [
						{
							columnKey: 'ID',
							classes: 'ui-hidden-phone'
						}
					]
				},
				{
					name: "Selection",
					mode: 'row',
					multipleSelection: true
				}
			]
		});
	}
	function createRowSelectionRowSelectorsGrid() {
		$("#rowSelectionRowSelectorsGrid").igGrid({
			width: "100%",
			autoGenerateColumns: false,
			dataSource: northwindEmployees,
			responseDataKey: "results",
			dataSourceType: "json",
			columns: [
				{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
				{ headerText: "Name", key: "Name", dataType: "string" },
				{ headerText: "Title", key: "Title", dataType: "string" },
				{ headerText: "Phone", key: "Phone", dataType: "string" }
			],
			features: [
				{
					name: 'Responsive',
					enableVerticalRendering: false,
					columnSettings: [
						{
							columnKey: 'ID',
							classes: 'ui-hidden-phone'
						}
					]
				},
					{
						name: "Selection",
						mode: 'row',
						multipleSelection: true
					},
					{
						name: "RowSelectors",
						enableCheckBoxes: true,
						enableRowNumbering: false,
						enableSelectAllForPaging: true // this option is true by default
					},
					{
						name: "Paging",
						pageSize: 5
					}
			]
		});
	}
    </script>
</body>
</html>