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:

Code View

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"
        }
    }
});