Available in the Full Version

Tree Grid - Overview

This sample demonstrates how to configure row selectors in igTreeGrid.

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:

Updating
Sorting
Filtering
Paging
Column Fixing
Tooltips
Hiding
Selection
Multi-Column Headers

Code View

Show In JsFiddle

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/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>

Ignite UI for jQuery | Samples

Search Results

Tree Grid - Overview

Code View