Available in the Full Version
Tree Grid - Selection
This sample demonstrates how to configure row selectors in igTreeGrid.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'row-selectors.ts' ).then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgTreeGridComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `<ig-tree-grid [(options)]='gridOptions' [(widgetId)]='id'></ig-tree-grid>`
})
export class AppComponent {
private gridOptions: IgTreeGrid;
private id: string;
private hierarchicalDS: Array <any>;
constructor() {
this.id = 'grid1';
this.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%"
}
]
}];
this.gridOptions = {
width: "100%",
dataSource: this.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'
}
]
};
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, IgTreeGridComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<!--Sample JSON Data-->
<script src="/js-data/northwind"></script>
<script type="text/babel">
var App = React.createClass({
render: function () {
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%" }
]
}
];
return <IgTreeGrid id="checkboxModeTreeGrid"
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'
}
]} />
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>