Available in the Full Version

Tree Grid - Selection

This sample demonstrates how to configure row selectors in igTreeGrid.
Show
records
TasksStartFinishDurationProgress
1Project Plan6/2/20148/22/201460d32%
1.1Planning6/2/20146/4/20143d100%
1.2Write a specification6/5/20146/6/20142d100%
1.3Create a demo application6/9/20146/11/20143d100%
1.4Collect a feedback6/12/20146/12/20141d100%
1.5Design6/13/20146/19/20145d60%
1.5.1Conceptual Design6/13/20146/16/20142d100%
1.5.2Preliminary Design6/17/20146/18/20142d65%
1.5.3Final Design6/19/20146/19/20141d15%
1.6Development6/20/20148/20/201444d5%

This sample is designed for a larger screen size.

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

The editors below the grid configure different options of the feature. The rowSelectorNumberingMode option controls the format of the row numbering. If it's set to "hierarchical," the number will be a concatenation of the parent and child indexes. The other possible value for this option is "sequential," which will define row numbering format to be the index of the visible row. The triState checkboxes should be used with single selection only. In triState mode, there is a clear distinction between selected row and the state of the corresponding checkbox: selecting a row will not check the corresponding checkbox, and clicking selector checkbox will not apply the selection to the row. The other possible value for this option is biState. When biState is enabled, selecting a row will not affect its parent row.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
 

    <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="checkboxModeTreeGrid"></table>
    <script>
		var hierarchicalDS = [
			{
				"id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
					{ "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
					{ "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
					{ "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
					{ "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
					{
						"id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
							{ "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
							{ "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
							{ "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
						]
					},
					{
						"id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
							{ "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
							{ "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
							{ "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
							{ "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
						]
					},
					{ "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
				]
			}
		];
		$(function () {
			$("#checkboxModeTreeGrid").igTreeGrid({
				width: "100%",
				dataSource: hierarchicalDS,
				autoGenerateColumns: false,
				height: 500,
				primaryKey: "id",
				columns: [
					{ headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
					{ headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
					{ headerText: "Start", key: "start", width: "20%", dataType: "string" },
					{ headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
					{ headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
					{ headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
				],
				childDataKey: "products",
				features: [
					{
						name: "Selection",
						multipleSelection: true
					},
					{
						name: "RowSelectors",
						multipleSelection: true,
						rowSelectorColumnWidth: 80,
						enableRowNumbering: true,
						rowSelectorNumberingMode: "hierarchical"
					},
					{
						name: "Paging",
						pageSize: 10,
						mode: 'allLevels'
					}
				]
			});
		});
    </script>
</body>
</html>