Available in the OSS Version

Tree - Overview

The igTree control is a jQuery tree control that binds to UL HTML elements, JSON, XML, .NET collections, and remote data sources.

This sample is designed for a larger screen size.

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

The igTree supports these features:

Checkboxes
Node Images
Drag-and-Drop
Load on Demand
KnockoutJS Binding
More features are listed in the menu.

Code View

Show In JsFiddle

Copy to Clipboard

                    var data = [
    {
        "ID": 1, "RegionName": "North America", "Countries":
        [
            { "ID": 1, "CountryName": "United States" },
            { "ID": 2, "CountryName": "Canada" },
            { "ID": 3, "CountryName": "Mexico" }
        ]
    },
    {
        "ID": 2, "RegionName": "South America", "Countries":
        [
            { "ID": 4, "CountryName": "Brazil" },
            { "ID": 5, "CountryName": "Uruguay" }
        ]
    },
    {
        "ID": 3, "RegionName": "Europe", "Countries":
        [
            { "ID": 6, "CountryName": "United Kingdom" },
            { "ID": 7, "CountryName": "Germany" },
            { "ID": 8, "CountryName": "Bulgaria" }
        ]
    }
];

$("#tree").igTree({
    dataSource: data, //JSON Array defined above
    bindings: {
        textKey: "RegionName",
        valueKey: "ID",
        childDataProperty: "Countries",
        bindings: {
            textKey: "CountryName",
            valueKey: "ID"
        }
    }
});

                    <ul id="tree"></ul>

                    <!DOCTYPE html>
<html>
<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" />

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

    <ul id="tree"></ul>

    <script>

        $(function () {

            var data = [
                {
                    "ID": 1, "RegionName": "North America", "Countries":
                    [
                        { "ID": 1, "CountryName": "United States" },
                        { "ID": 2, "CountryName": "Canada" },
                        { "ID": 3, "CountryName": "Mexico" }
                    ]
                },
                {
                    "ID": 2, "RegionName": "South America", "Countries":
                    [
                        { "ID": 4, "CountryName": "Brazil" },
                        { "ID": 5, "CountryName": "Uruguay" }
                    ]
                },
                {
                    "ID": 3, "RegionName": "Europe", "Countries":
                    [
                        { "ID": 6, "CountryName": "United Kingdom" },
                        { "ID": 7, "CountryName": "Germany" },
                        { "ID": 8, "CountryName": "Bulgaria" }
                    ]
                }
            ];

            $("#tree").igTree({
                dataSource: data, //JSON Array defined above
                bindings: {
                    textKey: "RegionName",
                    valueKey: "ID",
                    childDataProperty: "Countries",
                    bindings: {
                        textKey: "CountryName",
                        valueKey: "ID"
                    }
                }
            });
        });
    </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( 'json-binding.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             import { Component, NgModule } from '@angular/core';
import { IgTreeComponent } 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 widgetId="tree1" [(options)]="options"> </ig-tree>`
})
export class AppComponent {
	protected options: IgTree;
	protected data = [
                {
                    "ID": 1, "RegionName": "North America", "Countries":
                    [
                        { "ID": 1, "CountryName": "United States" },
                        { "ID": 2, "CountryName": "Canada" },
                        { "ID": 3, "CountryName": "Mexico" }
                    ]
                },
                {
                    "ID": 2, "RegionName": "South America", "Countries":
                    [
                        { "ID": 4, "CountryName": "Brazil" },
                        { "ID": 5, "CountryName": "Uruguay" }
                    ]
                },
                {
                    "ID": 3, "RegionName": "Europe", "Countries":
                    [
                        { "ID": 6, "CountryName": "United Kingdom" },
                        { "ID": 7, "CountryName": "Germany" },
                        { "ID": 8, "CountryName": "Bulgaria" }
                    ]
                }
            ];

		constructor() {
			this.options = {
			dataSource: this.data,
			bindings: {
				textKey: "RegionName",
				valueKey: "ID",
				childDataProperty: "Countries",
				bindings: {
					textKey: "CountryName",
					valueKey: "ID"
				}
			}
		}
	}
};

@NgModule({
	imports:	  [ BrowserModule, FormsModule ],
	declarations: [ AppComponent, IgTreeComponent ],
	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>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.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 ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
    <script type="text/javascript">
        var data = [
			{
			    "ID": 1, "RegionName": "North America", "Countries":
			    [
			        { "ID": 1, "CountryName": "United States" },
			        { "ID": 2, "CountryName": "Canada" },
			        { "ID": 3, "CountryName": "Mexico" }
			    ]
			},
			{
			    "ID": 2, "RegionName": "South America", "Countries":
			    [
			        { "ID": 4, "CountryName": "Brazil" },
			        { "ID": 5, "CountryName": "Uruguay" }
			    ]
			},
			{
			    "ID": 3, "RegionName": "Europe", "Countries":
			    [
			        { "ID": 6, "CountryName": "United Kingdom" },
			        { "ID": 7, "CountryName": "Germany" },
			        { "ID": 8, "CountryName": "Bulgaria" }
			    ]
			}
        ];
    </script>
    <div id="app">
    </div>

    <script type="text/babel">
        var App = React.createClass({
            render: function() {
                let treeControl = {
                    dataSource: new $.ig.DataSource({ dataSource: data }),
                    bindings: {
                    textKey: "RegionName",
                    childDataProperty : "Countries",
                    valueKey: "ID",
                        bindings: {
                            textKey: "CountryName",
                            valueKey: "ID"
                        }
                    }
                };

				return (
					<IgTree id="igTree" dataSource={treeControl.dataSource} bindings={treeControl.bindings} />
                );
            }
        });

        ReactDOM.render(
            <App />, 
            document.getElementById("app"));
    </script>

</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Tree - Overview

Code View