Available in the Full Version
Tree Grid - Overview
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 igTreeGrid control is a jQuery widget that displays data in a tree-like tabular structure. The control presents hierarchical data similar to the igHierarhicalGrid control, but the tree grid displays data all in the same columns. Rendering hierarchal data all with the same columns allows the tree grid to have superior render speeds while maintaining low memory and low DOM footprints. Further, the igTreeGrid also supports advanced interactive features that operate in the same way as the igGrid. These features include:
Code View
Copy to Clipboard
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%" }
]
}
];
$("#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'
}
]
});
<table id="checkboxModeTreeGrid"></table>
<!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>