Ignite UI API Reference

ui.igTreeGrid

Overview
Options
Events
Methods
Theming

The igTreeGrid control is a jQuery widget that displays data in a tree-like tabular structure. The control presents hierarchical data similar to the igHierarchicalGrid control. Child layouts in igTreeGrid have the same column definition as the root layout. Rendering hierarchical 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, Resizing, Selection, Multi-Column Headers,and capabilities.

Note: The igTreeGrid is a stand-alone control, which also uses all of the options, events and methods of the igGrid.

The following code snippet demonstrates how to initialize the igTreeGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

        <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Combined Scripts -->
            <script src="js/infragistics.core.js" type="text/javascript"></script>
            <script src="js/infragistics.lob.js" type="text/javascript"></script>
            <script type="text/javascript">
                var products  = [
                    { "ID": 0, "Name": "Food", "Price": "-", "Products": [
                        {"ID": 15, "Name": "Sandwich", "Price": "-", "Products": [
                            { "ID": 16, "Name": "Club sandwich", "Price": "3.5" }
                        ] }
                    ]},
                    { "ID": 1, "Name": "Beverages", "Price": "-", "Products": [
                        { "ID": 2, "Name": "Milk", "Price": "3.5" },
                        { "ID": 3, "Name": "Vint soda", "Price": "20.9" },
                        { "ID": 4, "Name": "Havina Cola", "Price": "19.9" },
                        { "ID": 5, "Name": "Fruit Punch", "Price": "22.99" },
                        { "ID": 6, "Name": "Cranberry Juice", "Price": "22.8" },
                        { "ID": 7, "Name": "Pink Lemonade", "Price": "18.8" }
                    ]},
                    { "ID": 18, "Name": "Bags & Shoes", "Price": "-"},
                    { "ID": 8, "Name": "Electronics", "Price": "-", "Products": [
                        { "ID": 9, "Name": "DVD Players", "Price": "-", "Products": [
                            { "ID": 10, "Name": "DVD Player 10", "Price": "3.5", "Products": [
                                { "ID": 11, "Name": "DVD Player 11", "Price": "3.5"}
                            ] }
                        ] },
                        { "ID": 12, "Name": "TV", "Price": "-", "Products": [
                            { "ID": 13, "Name": "LCD HDTV", "Price": "-", "Products": [
                                { "ID": 14, "Name": "LCD HDTV 14", "Price": "3.5" },
                                { "ID": 24, "Name": "LCD HDTV 24", "Price": "12.3" }
                            ]
                            },
                            { "ID": 23, "Name": "Milk3", "Price": "7.5" }
                        ] }
                    ]},
                    { "ID": 17, "Name": "Accessories", "Price": "-" },
                    {
                        "ID": 19, "Name": "Toys", "Price": "-", "Products": [
                            { "ID": 20, "Name": "Action Figures", "Price": "3.5" }
                        ]
                    }
                ];

               $(function () {
                    $("#treegrid").igTreeGrid({
                        width: "800px",
                        height: "630px",
                        initialExpandDepth: 3,
                        dataSource: products,
                        autoGenerateColumns: false,
                        primaryKey: "ID",
                        columns: [
                            { headerText: "ID", key: "ID", width: "250px", dataType: "number" },
                            { headerText: "Name", key: "Name", width: "130px", dataType: "string" },
                            { headerText: "Price", key: "Price", width: "130px", dataType: "number" }
                        ],
                        autoGenerateLayouts: false,
                        dataSourceLayoutKey: "Products"
                    });
               });
            </script>
        </head>
        <body>
            <div id="treegrid"></div>
        </body>
        </html>

Related Samples

collapseTooltip

Type:: string
Default:: ""

Specifies the collapse indicator tooltip for rows that have child rows.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            collapseTooltip : "Click here to collapse the row"
        });

        //Get
        var collapseTooltip = $(".selector").igTreeGrid("option", "collapseTooltip");

dataSourceLayoutKey

Type:: string
Default:: null

Data source specific property - used to get layout data records.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceLayoutKey: "Products"
        });

        //Get
        var dataSourceLayoutKey = $(".selector").igTreeGrid("option", "dataSourceLayoutKey");

dataSourceSettings

Type:: object
Default:: {}

Configure datasource settings like filtering(e.g. from which level, to which level to apply filtering), sorting specific settings.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                filtering: {
                    fromLevel: 2,
                    showHierarchicalData: false,
                    toLevel: 10
                },
                sorting: {
                    fromLevel: 2,
                    toLevel: 10
                }
            }
        });

        //Get
        var dataSourceSettings = $(".selector").igTreeGrid("option", "dataSourceSettings");

filtering

Type:: object
Default:: {}

Configure datasource filtering settings.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                filtering: {
                    fromLevel: 2,
                    showHierarchicalData: false,
                    toLevel: 10
                }
            }
        });

        //Get
        var filtering = $(".selector").igTreeGrid("option", "dataSourceSettings").filtering;

fromLevel

Type:: number
Default:: 0

Specifies from which data bound level to be applied filtering - 0 is the first level.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                filtering: {
                    fromLevel: 2
                }
            }
        });

        //Get
        var fromLevel = $(".selector").igTreeGrid("option", "dataSourceSettings").filtering.fromLevel;

showHierarchicalData

Type:: bool
Default:: true

If true show child records(if any) - even if child records don't match filtering conditions. If false show only those records that match filtering conditions(and their parent records) and do not show child records(if any) that don't match filtering conditions.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                filtering: {
                    showHierarchicalData: false
                }
            }
        });

        //Get
        var showHierarchicalData = $(".selector").igTreeGrid("option", "dataSourceSettings").filtering.showHierarchicalData;

toLevel

Type:: number
Default:: -1

Specifies to which data bound level to be applied filtering - if -1 filtering should be applied to the last data bound level.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                filtering: {
                    toLevel: 10
                }
            }
        });

        //Get
        var toLevel = $(".selector").igTreeGrid("option", "dataSourceSettings").filtering.toLevel;

sorting

Type:: object
Default:: {}

Configure datasource sorting settings.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                sorting: {
                    fromLevel: 2,
                    toLevel: 10
                }
            }
        });

        //Get
        var sorting = $(".selector").igTreeGrid("option", "dataSourceSettings").sorting;

fromLevel

Type:: number
Default:: 0

Specifies from which data bound level to be applied sorting - 0 is the first level.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
                sorting: {
                    fromLevel: 2
                }
            }
        });

        //Get
        var fromLevel = $(".selector").igTreeGrid("option", "dataSourceSettings").sorting.fromLevel;

toLevel

Type:: number
Default:: -1

Specifies to which data bound level to be applied sorting - if -1 sorting should be applied to the last data bound level.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
                sorting: {
                    toLevel: 10
                }
            }
        });

        //Get
        var toLevel = $(".selector").igTreeGrid("option", "dataSourceSettings").sorting.toLevel;

dataValueForRootLayout

Type:

number

Default:

-1
This option is used only when hierarchicalDataSource is false. If the value of the data record with key specified by the foreignKey is equal to the dataValueForRootLayout - this means the record is from the root layout.
Code Sample
```
 
        //Initialize
        $(".selector").igTreeGrid({
            dataValueForRootLayout: 11
        });

        //Get
        var dataValueForRootLayout = $(".selector").igTreeGrid("option", "dataValueForRootLayout");      
```

expandTooltip

Type:: string
Default:: ""

Specifies the expand indicator tooltip for rows that have child rows.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            expandTooltip : "Click here to expand the row"
        });

        //Get
        var expandTooltip = $(".selector").igTreeGrid("option", "expandTooltip");

expansionIndicatorVisibility

Type:: bool
Default:: true

Specifies if rows(that have child rows) will have an expander image that will allow end users to expand and collapse them. This option can be set only at initialization.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            expansionIndicatorVisibility: false
        });

        //Get
        var expansionIndicatorVisibility = $(".selector").igTreeGrid("option", "expansionIndicatorVisibility");

foreignKey

Type:: string
Default:: null

Specifies the foreignKey of the root layout.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            foreignKey: "PID"
        });

        //Get
        var foreignKey = $(".selector").igTreeGrid("option", "foreignKey");

hierarchicalDataSource

Type:: string
Default:: true

If false data source is flat with self-referencing data.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            hierarchicalDataSource: false
        });

        //Get
        var hierarchicalDataSource = $(".selector").igTreeGrid("option", "hierarchicalDataSource");

indentation

Type:

number

Default:

30
Specifies the indentation for a tree grid row(it is applied on the first data cell and indentation is shown as margins left content - calculated as dataBoundLevel*indentation).
Code Sample
```
 
        //Initialize
        $(".selector").igTreeGrid({
            indentation: 50
        });

        //Get
        var indentation = $(".selector").igTreeGrid("option", "indentation");      
```

initialDataBindDepth

Type:: number
Default:: -1

Specifies the depth down to which the tree grid would be data bound upon initial render. If -1 means that all layouts should be data bound.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            initialDataBindDepth: 1
        });

        //Get
        var initialDataBindDepth = $(".selector").igTreeGrid("option", "initialDataBindDepth");

initialExpandDepth

Type:: number
Default:: -1

Specifies the depth down to which the tree grid would be expanded upon initial render. If -1 means that all databound layouts should be expanded.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            initialExpandDepth: 3
        });

        //Get
        var initialExpandDepth = $(".selector").igTreeGrid("option", "initialExpandDepth");

key

Type:

string

Default:

id
Unique identifier used in self-referencing flat data source. For child layout foreignKey references key of the parent row. It is used ONLY IF the option hierarchicalDataSource is false.
Code Sample
```
 
        //Initialize
        $(".selector").igTreeGrid({
            key: "ID"
        });

        //Get
        var key = $(".selector").igTreeGrid("option", "key");      
```

renderExpandCellFunc

Type:: enumeration
Default:: null

a reference or name of a javascript function which renders expand indicators(called ONLY IF option renderExpandColumn is true).

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            renderExpandCellFunc: function (rowData) {
                //rowData.dataBoundDepth;
                //rowData.expand;
                //rowData.hasExpandCell;
                //rowData.parentCollapsed;
                if (rowData.hasExpandCell) {
                    return "<td data-expand-cell='1' data-skip='true'><span>+</span></td>";
                } else {
                    return "<td data-expand-cell='1' data-skip='true'></td>";
                }
            }
        });

        //Get
        var renderExpandCellFunc = $(".selector").igTreeGrid("option", "renderExpandCellFunc");

renderExpandColumn

Type:: bool
Default:: false

Specify whether to render non-data column which contains expander indicators.

Code Sample

 
        //Initialize
        $(".selector").igTreeGrid({
            renderExpandColumn: true
        });

        //Get
        var renderExpandColumn = $(".selector").igTreeGrid("option", "renderExpandColumn");

renderFirstDataCellFunc

Type:: enumeration
Default:: null

a reference or name of a javascript function which changes first data cell - renders indentation according to databound level.

Code Sample

 
        $(".selector").igTreeGrid({
            renderFirstDataCellFunc: function (rowData) {
                //rowData.dataBoundDepth;
                //rowData.expand;
                //rowData.hasExpandCell;
                //rowData.parentCollapsed;
                if (rowData.hasExpandCell) {
                    //return "<td data-expand-cell='1' data-skip='true'></td>";
                    var newTDSmarkup = '',
                        idxStart = markup.indexOf('<td'),
                        TDSmarkup = markup.substring(idxStart),
                        tdContentFirstInd = TDSmarkup.indexOf(">", 2),
                        otherTDSmarkup = TDSmarkup.substring(tdContentFirstInd + 1);// find first td
                    //note that the markup that should be returned is <td>...</td></tr>
                    return "<td data-expand-cell='1' data-skip='true'>" +
                        "<span class='ui-igtreegrid-expandcell'><span class='ui-igtreegrid-expandbutton'>+</span></span>" + otherTDSmarkup;
                }
            }
        });

        //Get
        var renderFirstDataCellFunc = $(".selector").igTreeGrid("option", "renderFirstDataCellFunc");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

childRowCollapsed

Cancellable:: false

Event which is fired after a child treegrid row is hidden
use args.owner to access the treegrid object
use args.row to access a row element that is hidden(jQuery representation)
use args.dataBoundDepth to access the databound depth level of the treegrid row.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridchildchildrowcollapsed", function(evt, ui) {
            //return the databound depth level of the treegrid row
            ui.dataBoundDepth
            //return a row element that should be shown(jQuery representation)
            ui.row
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            childRowCollapsed: function (evt, ui) {...}
        });

childRowCollapsing

Cancellable:: true

Event which is fired when a child treegrid row is about to be hidden
use args.owner to access the treegrid object
use args.row to access a row element that should be hidden(jQuery representation)
use args.dataBoundDepth to access the databound depth level of the treegrid row.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridchildchildrowcollapsing", function(evt, ui) {
            //return the databound depth level of the treegrid row
            ui.dataBoundDepth
            //return a row element that should be shown(jQuery representation)
            ui.row
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            childRowCollapsing: function (evt, ui) {...}
        });

childRowExpanded

Cancellable:: false

Event which is fired after a child treegrid row is shown
use args.owner to access the treegrid object
use args.row to access a row element that is shown(jQuery representation)
use args.dataBoundDepth to access the databound depth level of the treegrid row.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridchildrowexpanded", function(evt, ui) {
            //return the databound depth level of the treegrid row
            ui.dataBoundDepth
            //return a row element that should be shown(jQuery representation)
            ui.row
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            childRowExpanded: function (evt, ui) {...}
        });

childRowExpanding

Cancellable:: true

Event which is fired when a child treegrid row is about to be shown
use args.owner to access the treegrid object
use args.row to access a row element that should be shown(jQuery representation)
use args.dataBoundDepth to access the databound depth level of the treegrid row.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridchildrowexpanding", function(evt, ui) {
            //return the databound depth level of the treegrid row
            ui.dataBoundDepth
            //return a row element that should be shown(jQuery representation)
            ui.row
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            childRowExpanding: function (evt, ui) {...}
        });

rowCollapsed

Cancellable:: false

Event which is fired after a treegrid row(for the most parent layout) is collapsed.
use args.owner to access the treegrid object
use args.parentrow to access a row element(for the most parent layout) that was collapsed(jQuery representation)
use args.dataBoundDepth to access the databound depth level of the topmost treegrid row that was collapsed.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridrowcollapsed", function (evt, ui) {
            //return databound level of the topmost treegrid row to be expanded
            ui.dataBoundDepth
            //return a row element(for the most parent layout) that should be expanded(jQuery representation)
            ui.parentrow
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            rowCollapsed: function (evt, ui) {...}
        });

rowCollapsing

Cancellable:: true

Event which is fired when a treegrid row(for the most parent layout) is about to be collapsed.
use args.owner to access the treegrid object
use args.parentrow to access a row element(for the most parent layout) that should be collapsed(jQuery representation)
use args.dataBoundDepth to access the databound level of the topmost treegrid row to be collapsed.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridrowcollapsing", function (evt, ui) {
            //return databound level of the topmost treegrid row to be expanded
            ui.dataBoundDepth
            //return a row element(for the most parent layout) that should be expanded(jQuery representation)
            ui.parentrow
            //return reference to igTreeGrid
            ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
            rowCollapsing: function (evt, ui) {...}
        });

rowExpanded

Cancellable:: false

Event which is fired after a treegrid row(for the most parent layout) is expanded.
use args.owner to access the treegrid object
use args.parentrow to access a row element(for the most parent layout) that was expanded(jQuery representation)
use args.dataBoundDepth to access the databound level of the topmost treegrid row that was expanded.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridrowexpanded", function (evt, ui) {
          //return databound level of the topmost treegrid row to be expanded
          ui.dataBoundDepth
          //return a row element(for the most parent layout) that should be expanded(jQuery representation)
          ui.parentrow
          //return reference to igTreeGrid
          ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
          rowExpanded: function (evt, ui) {...}
        });

rowExpanding

Cancellable:: true

Event which is fired when a treegrid row(for the most parent layout) is about to be expanded.
use args.owner to access the treegrid object
use args.parentrow to access a row element(for the most parent layout) that should be expanded(jQuery representation)
use args.dataLevel to access the databound level of the topmost treegrid row to be expanded.

Code Sample

 
        //Delegate
        $(document).delegate(".selector", "igtreegridrowexpanding", function (evt, ui) {
          //return databound level of the topmost treegrid row to be expanded
          ui.dataBoundDepth
          //return a row element(for the most parent layout) that should be expanded(jQuery representation)
          ui.parentrow
          //return reference to igTreeGrid
          ui.owner
        });

        //Initialize
        $(".selector").igTreeGrid({
          rowExpanding: function (evt, ui) {...}
        });

Show Details

dataBind

.igTreeGrid( "dataBind" );
Performs databinding on the tree grid.
Code Sample
```
 
      $(".selector").igTreeGrid("dataBind");
      
```
destroy

.igTreeGrid( "destroy" );

Return Type:

object

Return Type Description:

Returns reference to this igGridTreeView.
Destroys igGridUpdating.
Code Sample
```
 
      $(".selector").igTreeGrid("destroy");
      
```
gridInstance

.igTreeGrid( "gridInstance" );

Return Type:

object
Returns the igGrid instance.
Code Sample
```
 
      var gridInstance = $(".selector").igTreeGrid("gridInstance");
      
```
toggleRowById

.igTreeGrid( "toggleRowById", id:string );
Toggle row by specified data-id.
- id
- Type:string
- id of the row.
Code Sample
```
 
      $(".selector").igTreeGrid("toggleRowById", 1);
      
```

ui-igtreegrid
ui-igtreegrid-expandcontainer

Classes applied to data cell expand container.
ui-iggrid-nongrouprowemptycell ui-iggrid-last-emptycell

Classes applied to non-data cell that's rendered in front of a data cell(when option renderExpandColumn is true) and its TR hasn't child layouts.
ui-igtreegrid-expandbuttoncontainer-group-by

Classes applied to the container which holds expander element.
ui-icon ui-igtreegrid-expandbutton ui-icon-plus

Classes applied to the expander span element, when the row is collapsed.
ui-icon ui-igtreegrid-expandbutton ui-igtreegrid-expandbuttonexpanded ui-icon-minus

Classes applied to the expander span element, when the row is expanded.
ui-igtreegrid-expandercell

Classes applied to non-data cell that's rendered in front of a data cell(when option renderExpandColumn is true) and its TR has child layouts.
ui-igtreegrid-expandcol-container
ui-igtreegrid-expandcell
ui-iggrid-expandheadercellgb ui-iggrid-header ui-widget-header

Classes applied to the special non-data cell rendered in the header (the small empty first cell) - only if option renderExpandColumn is true.
ui-iggrid-rowlevel

Classes applied to the data row. For instance if row is part of the root layout then it will have class rowLevel0, if it is part of the first child layout it will have class rowLevel1, etc.

Ignite UI Home

Ignite UI API Reference

ui.igTreeGrid

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

collapseTooltip

Code Sample

dataSourceLayoutKey

Code Sample

dataSourceSettings

Code Sample

filtering

Code Sample

fromLevel

Code Sample

showHierarchicalData

Code Sample

toLevel

Code Sample

sorting

Code Sample

fromLevel

Code Sample

toLevel

Code Sample

dataValueForRootLayout

Code Sample

expandTooltip

Code Sample

expansionIndicatorVisibility

Code Sample

foreignKey

Code Sample

hierarchicalDataSource

Code Sample

indentation

Code Sample

initialDataBindDepth

Code Sample

initialExpandDepth

Code Sample

key

Code Sample

renderExpandCellFunc

Code Sample

renderExpandColumn

Code Sample

renderFirstDataCellFunc

Code Sample

childRowCollapsed

Code Sample

childRowCollapsing

Code Sample

childRowExpanded

Code Sample

childRowExpanding

Code Sample

rowCollapsed

Code Sample

rowCollapsing

Code Sample

rowExpanded

Code Sample

rowExpanding

Code Sample

dataBind

Code Sample

destroy

Code Sample

gridInstance

Code Sample

toggleRowById

Code Sample

ui-igtreegrid

ui-igtreegrid-expandcontainer

ui-iggrid-nongrouprowemptycell ui-iggrid-last-emptycell

ui-igtreegrid-expandbuttoncontainer-group-by