Ignite UI™ API Documentation

ui.igHierarchicalGrid

The igHierarchicalGrid control is a hierarchical jQuery Grid control that features filtering, group by, column hiding, paging, column resizing, row selectors, cell selection, sorting, column summaries, tooltips, and updating functionality. For more information on each of these features, see their corresponding API document: igGridFiltering, igGridGroupBy, igGridHiding, igGridResizing, igGridPaging, igGridRowSelectors, igGridSelection, igGridSorting, igGridSummaries, igGridTooltips, igGridUpating. The igHierarchicalGrid control is built on top of the stand-alone flat-data igGrid control. The API for the igGrid control serves as the base for configuring the igHierarchicalGrid control and its columnLayouts settings. See the igGrid control API document for more details.

The following code snippet demonstrates how to initialize the igHierarchicalGrid 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 igHierarchicalGrid 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">
    $(function () {
        var jsonData = { "d": [
            {
                "ID": 0,
                "Name": "Food",
                "Category": { "ID": 0, "Name": "Food", "Active": true, "Date": "\/Date(1059660800000)\/" },
                "Products": [
                    { "ID": 0, "Name": "Bread", "Price": "2.5" }
                ]
            },
            {
                "ID": 1,
                "Name": "Beverages",
                "Category": { "ID": 2, "Name": "Beverages", "Active": true, "Date": "\/Date(1159660800000)\/" },
                "Products": [
                    { "ID": 1, "Name": "Milk", "Price": "3.5" },
                    { "ID": 2, "Name": "Vint soda", "Price": "20.9" }
                ]
            },
            {
                "ID": 2,
                "Name": "Electronics",
                "Category": { "ID": 5, "Name": "Electronics", "Active": false, "Date": "\/Date(1859660800000)\/" },
                "Products": [
                    { "ID": 7, "Name": "DVD Player", "Price": "35.88" },
                    { "ID": 8, "Name": "LCD HDTV", "Price": "1088.8" }
                ]
            }
        ]}
 
        $("#hierarchicalGrid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: jsonData,
            dataSourceType: "json",
            responseDataKey: "d",
 
            autoGenerateColumns: false,
            primaryKey: "ID",
            columns: [
                { headerText: "ID", key: "ID", width: "50px", dataType: "number" },
                { headerText: "Name", key: "Name", width: "130px", dataType: "string" }
            ],
            autoGenerateLayouts: false,
            columnLayouts: [
            {
                key: "Products",
                responseDataKey: "",
                childrenDataProperty: "Products",
                autoGenerateColumns: false,
                primaryKey: "ID",
                columns: [
                    { key: "ID", headerText: "ID", width: "25px" },
                    { key: "Name", headerText: "Product Name", width: "90px" },
                    { key: "Price", headerText: "Price", dataType: "number", width: "55px" }
                ]
            }
        ]
        });
    });
    </script>
</head>
<body>
<table id="hierarchicalGrid"></table>
</body>

Related Samples

alternateRowStyles
Inherited

Type:: bool
Default:: true

Enables/disables rendering of alternating row styles (odd and even rows receive different styling).

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    alternateRowStyles : true;
});
 
//Get
var rowAltStyles = $(".selector").igHierarchicalGrid("option", "alternateRowStyles");
 
//Set
$(".selector").igHierarchicalGrid("option", "alternateRowStyles", true);

animationDuration

Type:: number
Default:: 500

The row expanding/collapsing animation duration in ms.

Code Sample

//Initialize
 $(".selector").igHierarchicalGrid({
    animationDuration: 1000
});
 
//Get
var animationDuration = $(".selector").igHierarchicalGrid("option", "animationDuration");
 
//Set
$(".selector").igHierarchicalGrid("option", "animationDuration", 1000);
$(".selector").igHierarchicalGrid("dataBind");

autoAdjustHeight
Inherited

Type:

bool

Default:

true

If autoAdjustHeight is set to false, the height will be set only on the scrolling container, and all other UI elements such as paging footer / filter row / headers will add on top of that, so the total height of the grid will be more than this value - the height of the scroll container (content area) will not be dynamically calculated. Setting this option to false will usually result in a lot better initial rendering performance for large data sets ( > 1000 rows rendered at once, no virtualization enabled), since no reflows will be made by browsers when accessing DOM properties such as offsetHeight.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
autoAdjustHeight : false
});

// Get
var adjustHeight = $(".selector").igHierarchicalGrid("option", "autoAdjustHeight");
autoCommit
Inherited

Type:

bool

Default:

false

Automatically commits the transactions as rows/cells are being edited to the client data source. A saveChanges call still needs to be performed in order to commit the transactions to a server-side data source.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
autoCommit : true
});

//Get
var commit = $(".selector").igHierarchicalGrid("option", "autoCommit");
autofitLastColumn
Inherited

Type:

bool

Default:

true

If set to true and all columns' widths are specified and their combined width is less than the grid width then the last column width will be automatically adjusted to fill the remaining empty space of the grid.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
autofitLastColumn : true
});

//Get
var autoFit = $(".selector").igHierarchicalGrid("option", "autofitLastColumn");
autoFormat
Inherited

Type:

enumeration

Default:

date
Sets gets ability to automatically format text in cells for numeric and date columns. The format patterns and rules for numbers and dates are defined in $.ig.regional.defaults object. Here column formatting is explained in details.
Members
- date
- Type:string
- formats only Date columns.
- number
- Type:string
- formats only number columns.
- dateandnumber
- Type:string
- formats both Date and number columns.
- true
- Type:bool
- formats Date and number columns.
- false
- Type:bool
- auto formatting is disabled.
Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
autoFormat : "number"
});
//Get
var autoFormat = $(".selector").igHierarchicalGrid("option", "autoFormat");
autoGenerateColumns
Inherited

Type:

bool

Default:

true

If no columns collection is defined, and autoGenerateColumns is set to true, columns will be inferred from the data source before the dataRendering event is fired. The inferred columns collection will be available to the developer for modification at dataRendering. If autoGenerateColumns is not explicitly set and columns has at least one column defined then autoGenerateColumns is automatically set to false.
If autoGenerateColumns is true and there are columns defined auto-generated columns will render after the explicitly defined ones.
Since auto-generated columns don't have width defined consider setting defaultColumnWidth as well.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
autoGenerateColumns : false
});

// Get
var autoCols = $(".selector").igHierarchicalGrid("option", "autoGenerateColumns");

autoGenerateLayouts

Type:: bool
Default:: false

If true, will autogenerate all layouts assuming default values for "childrenDataProperty"
When autoGenerateLayouts is enabled, it will automatically generate all columns recursively. (all columns on all levels).

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateLayouts: true
});
 
//Get
var autoGenerateLayouts = $(".selector").igHierarchicalGrid("option", "autoGenerateLayouts");
 
//Set
$(".selector").igHierarchicalGrid("option", "autoGenerateLayouts", true);

avgColumnWidth
Inherited

Type:

enumeration

Default:

null
Used for column virtualization in fixed mode. This is the average value in pixels for a column width.
Members
- string
- Type:string
- The avarage column width can be set in pixels ("25px").
- number
- Type:number
- The avarage column width can be set in pixels as a number (25).
Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
avgColumnWidth : "100px"
});
// Get
var width = $(".selector").igHierarchicalGrid("option", "avgColumnWidth");
avgRowHeight
Inherited

Type:

enumeration

Default:

25
Used for row virtualization in fixed mode. This is the average value in pixels (default) that will be used to calculate how many rows to render as the end user scrolls. Also all rows' height will be automatically set to this value.
Members
- string
- Type:string
- The avarage row height can be set in pixels ("25px").
- number
- Type:number
- The avarage row height can be set in pixels as a number (25).
Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
avgRowHeight : "35px"
});
// Get
var height = $(".selector").igHierarchicalGrid("option", "avgRowHeight");

caption
Inherited

Type:: string
Default:: null

Caption text that will be shown above the grid header.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    caption : "Sales Data"
});
 
//Get
var caption = $(".selector").igHierarchicalGrid("option", "caption");
 
//Set
$(".selector").igHierarchicalGrid("option", "caption", "Sales Data");

collapseTooltip
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies the default tooltip applied to an expand column cell, that is currently expanded. Use option locale.collapseTooltip.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    collapseTooltip: "Custom Collapse Tooltip Text"
});
 
//Get
var accessibility = $(".selector").igHierarchicalGrid("option", "collapseTooltip");
 
//Set
$(".selector").igHierarchicalGrid("option", "collapseTooltip", "Custom Collapse Tooltip Text");

columnLayouts

Type:: array
Default:: []
Elements Type:: object

List of columnLayout objects that specify the structure of the child grids. All options that are applicable to a flat grid are also applicable here.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateLayouts: false,
    columnLayouts: [
        {
            key: "Products",
            primaryKey: "ProductID",
            foreignKey: "CategoryID",
            responseDataKey: "d.results",
            autoGenerateColumns: true
        }
    ]
});

foreignKey

Type:

string

Default:

null

Specifies the foreignKey of the columnLayout. This is also the column key of the parent grid.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
autoGenerateLayouts: false,
columnLayouts: [
    {
        foreignKey: "CategoryID"
    }
]
});
key

Type:

string

Default:

null

Specifies the columnLayout key. This is the property that holds the data records for the current column layout.

Code Sample

$(".selector").igHierarchicalGrid({
autoGenerateLayouts: false,
columnLayouts: [
    {
        key: "Products"
    }
]
});
primaryKey

Type:

string

Default:

null

Specifies the primaryKey of the columnLayout. This also serves as the column key for the current column layout.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
autoGenerateLayouts: false,
columnLayouts: [
    {
        primaryKey: "ProductID"
    }
]
});

columns
Inherited

Type:: array
Default:: []
Elements Type:: object

An array of column objects. Checkout the Columns and Layout topic for details on configuring the columns array.

Code Sample

    // Initialize
    $(".selector").igHierarchicalGrid({
        autoGenerateColumns: false,
columns: [
            { headerText: "Product ID", key: "ProductID", dataType: "number" },
            { headerText: "Product Name", key: "Name", dataType: "string" },
            { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
            { headerText: "Color", key: "Color", dataType: "string" },
            { headerText: "StandardCost", key: "StandardCost", dataType: "number" },
        ]
    });
 
    // Get
    var cols = $(".selector").igHierarchicalGrid("option", "columns");
 
    // Set
    var newColumn = { headerText: "New Column", key: "NewCol" };
    cols.push(newColumn);
    $(".selector").igHierarchicalGrid("option", "columns", cols);

colSpan

Type:: number
Default:: 1

Specifies the colSpan of the cell in a Multi-Row Layout configuration. colSpan 0 is not supported and will be changed to 1 by the grid. Here you can find more about the Multi-Row Layout feature.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string", colSpan: 2 },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
        { headerText: "Color", key: "Color", dataType: "string" },
        { headerText: "StandardCost", key: "StandardCost", dataType: "number", colSpan: 2 },
    ]
});
 
//Get
var colSpan = $(".selector").igHierarchicalGrid("option", "columns")[0].colSpan;

columnCssClass

Type:: string
Default:: null

Space-separated list of CSS classes to be applied on the data cells of this column. The class is not applied if the column has a column template defined, which contains full <td> definition in the template.

Code Sample

<style>
    .colStyle {
        background-color: red;
    }
</style>
 
$(".selector").igHierarchicalGrid({
autoGenerateColumns: false,
columns: [
    { headerText: "Product ID", key: "ProductID", dataType: "number", columnCssClass: "colStyle" },
    { headerText: "Product Name", key: "Name", dataType: "string" },
    { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
    { headerText: "Color", key: "Color", dataType: "string" },
    { headerText: "StandardCost", key: "StandardCost", dataType: "number" }
]
});
//Get
var colCssClass =  $(".selector").igHierarchicalGrid("option", "columns")[0].columnCssClass;

columnIndex

Type:: number
Default:: null

Specifies the column index of the cell in a Multi-Row Layout configuration. All columns must have this property set for the multi-row-layout mode to be enabled. Here you can find more about the Multi-Row Layout feature.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
        { headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
        { headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
        { headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
    ]
});
 
//Get
var colIndex = $(".selector").igHierarchicalGrid("option", "columns")[0].columnIndex;

dataType

Type:: enumeration
Default:: string

Data type of the column cell values: string, number, bool, date, object.

Members

string
Type:string
The data inside the column is of type string.
number
Type:string
The data inside the column is of type number.
boolean
Type:string
The data inside the column is of type boolean.
date
Type:string
The data inside the column is of type date.
object
Type:string
The data inside the column is of type object.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Production Date", key: "ProductionDate", dataType: "date" },
    ]
});
//Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var productIdDataType = cols[0].dataType;

dateDisplayType

Type:: enumeration
Default:: local

Determines the way in which dates will be displayed in the grid for this column.

Members

local
Type:string
The dates for this column will be rendered in the client's local timezone.
utc
Type:string
The dates for this column will be rendered in their UTC representation.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        { headerText: "Departure Date", key: "DepartureDate", dataType: "date", dateDisplayType: "local" },
        { headerText: "Arrival Date", key: "ArrivalDate", dataType: "date", dateDisplayType: "utc" }
    ]
});
// Get
var cols = $('.selector').igHierarchicalGrid('option', 'columns');
var departureDateDisplayType = cols[0].dateDisplayType;

format

Type:: string
Default:: null

Gets/Sets the type of formatting for cells of the column. Default value is null. Checkout Formatting Dates, Numbers and Strings for details on the valid formatting specifiers.

If dataType is "date", then supported formats are following: "date", "dateLong", "dateTime", "time", "timeLong", "MM/dd/yyyy", "MMM-d, yy, h:mm:ss tt", "dddd d MMM", etc.
If dataType is "number", then supported numeric formats are following: "number", "currency", "percent", "int", "double", "0.00", "#.0####", "0", "#.#######", etc.
The value of "double" will be similar to "number", but with unlimited maximum number of decimal places.
The format patterns and rules for numbers and dates are defined in $.ig.regional.defaults object.
If dataType is "string" or not set, then format is rendered as it is with replacement of possible "{0}" flag by value in cell. Example, if format is set to "Name: {0}" and value in cell is "Bob", then value will appear as "Name: Bob"
If value is set to "checkbox", then checkboxes are used regardless of renderCheckboxes option of the grid. That has effect only when dataType option of column is set to "bool".

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", format: "number" },
        { headerText: "Production Date", key: "ProductionDate", dataType: "date", format: "ddd, MMM-d-yy HH:mm" },
    ]
});
 
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var productIdFormat = cols[0].format;

formatter

Type:: enumeration
Default:: null

Reference to a function (string or function) which will be used for formatting the cell values. The function should accept a value and return the new formatted value. Here column formatting is explained in details.

Members

string
Type:string
The name of the function which will be used for formatting the cell values.
function
Type:function
Function which will be used for formatting the cell values. The function should accept a value and return the new formatted value.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "In production", key: "InProduction", formatter: function(val, record) {return (val === 1)? "Yes" : "No";} }
    ]
});
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var inProductionFormatter = cols[0].formatter;

formula

Type:: enumeration
Default:: null

A reference to or the name of a JavaScript function, which will calculate the value of the current cell based on other cell values in the same row. Used with unbound columns.

Members

string
Type:string
The name of the JavaScript function.
function
Type:function
Reference to the JavaScript function.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Total", key: "TotalUC", unbound: true,  formula: function (data, grid)
            {
                return data["UnitPrice"] * data["UnitsInStock"];
            }
        }
    ]
});
// Get
var totalUC = $('.selector').igHierarchicalGrid('getUnboundColumnByKey', 'TotalUC');
var totalFormula = totalUC.formula;

group

Type:: array
Default:: []
Elements Type:: object

Array of child column definitions. If the column has the property group than the grid has multi column headers.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        { headerText: "Product Data", key: "ProductData", group: [
            { headerText: "Product Name", key: "Name", dataType: "string" },
            { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
        ]}
    ],
    features:[
        {
            name: "MultiColumnHeaders"
        }
    ],
    width: "500px"
});
 
// Get
// getMultiColumnHeaders method returns multicolumn headers array. if there aren't multicolumn headers returns undefined.
var columns = $(".selector").igHierarchicalGridMultiColumnHeaders("getMultiColumnHeaders");
var group = columns[0].group;

groupOptions

Type:: object
Default:: {}

Options used to configure collapsible column groups.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        {
            headerText: "Company Information",
            group: [
                {
                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                {
                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
            ],
            groupOptions: {
                expanded: false,
                allowGroupCollapsing: true
            },
            key: "companyInfo"
        }
    ],
    features: [
        {
            name: "MultiColumnHeaders"
        }
    ],
    width: "500px"
});
 
//Get
var columns = $(".selector").igHierarchicalGridMultiColumnHeaders("getMultiColumnHeaders");
var groupOptions = columns[0].groupOptions;

allowGroupCollapsing

Type:: bool
Default:: false

Sets whether expansion indicators are visible in the group header.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        {
            headerText: "Company Information",
            group: [
                {
                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                {
                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
            ],
            groupOptions: {
                expanded: false,
                allowGroupCollapsing: true
            },
            key: "companyInfo"
        }
    ],
    features: [
        {
            name: "MultiColumnHeaders"
        }
    ],
    width: "500px"
});
 
//Get
var columns = $(".selector").igHierarchicalGridMultiColumnHeaders("getMultiColumnHeaders");
var groupOptions = columns[0].groupOptions;
var allowGroupCollapsing = groupOptions.allowGroupCollapsing;

expanded

Type:: bool
Default:: true

Sets whether the group is expanded or collapsed. Applied only if the allowGroupCollapsing is set to true.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        {
            headerText: "Company Information",
            group: [
                {
                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                {
                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
            ],
            groupOptions: {
                expanded: false,
                allowGroupCollapsing: true
            },
            key: "companyInfo"
        }
    ],
    features: [
        {
            name: "MultiColumnHeaders"
        }
    ],
    width: "500px"
});
 
//Get
var columns = $(".selector").igHierarchicalGridMultiColumnHeaders("getMultiColumnHeaders");
var groupOptions = columns[0].groupOptions;
var expanded = groupOptions.expanded;

hidden

Type:: enumeration
Default:: never

Sets when should the group be hidden. Applied only if the allowGroupCollapsing is set to true.

Members

never
Type:string
never hide the group.
always
Type:string
always hide the group.
parentcollapsed
Type:string
hide the group when its parent group is collapsed.
parentexpanded
Type:string
hide the group when its parent group is expanded.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        {
            headerText: "Company Information",
            group: [
                {
                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                {
                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                    groupOptions: {
                        hidden: "parentcollapsed"
                    }
                },
                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
            ],
            groupOptions: {
                expanded: false,
                allowGroupCollapsing: true
            },
            key: "companyInfo"
        }
    ],
    features: [
        {
            name: "MultiColumnHeaders"
        }
    ],
    width: "500px"
});
//Get
var columns = $(".selector").igHierarchicalGridMultiColumnHeaders("getMultiColumnHeaders");
var groupOptions = columns[0].group[0].groupOptions;
var hidden = groupOptions.hidden;

headerCssClass

Type:: string
Default:: null

Space-separated list of CSS classes to be applied on the header cell of this column.

Code Sample

<style>
    .headerCss {
        background-color: red;
    }
</style>
 
// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string", headerCssClass: "headerCss" }
    ]
});
 
// Get
var headerCss = $(".selector").igHierarchicalGrid("option", "columns");
var headerCssClass = cols[0].headerCssClass;

headerText

Type:: string
Default:: null

Header text for the specified column.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string" },
    ]
});
 
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var productNameHeaderText = cols[0].headerText;

hidden

Type:: bool
Default:: false

Initial visibility of the column. A column can be hidden without the Hiding feature being enabled but there will be no UI for unhiding it. Columns can be defined as hidden in the options of the Hiding feature as well and those definitions take precedence.

Code Sample

// Initialize
$('.selector').igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string", hidden: true },
    ]
});
 
// Get
var cols = $('.selector').igHierarchicalGrid('option', 'columns');
var productNameHidden = cols[0].hidden;

key

Type:: string
Default:: null

The property in the data source to which the column is bound. Also used to identify the column by, and find specific columns with API methods such as columnByKey.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string" },
    ]
});
 
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var productNameKey = cols[0].key;

mapper

Type:: enumeration
Default:: null

This option is applicable only for columns with dataType of object. Reference to a function, or the name of the function, that will be used for complex data extraction from the data records, whose return value will be used for all data operations associated with this column and will be displayed as cell value. Here you can find more examples of how to setup a column mapper.

Members

string
Type:string
The name of the mapper function.
function
Type:function
Reference to the mapper function.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
        {
            headerText: "Category",
            key: "Category",
            dataType: "object",
            mapper: function (record) {
                return record.Category.Name;
            }
        }
    ]
});
//Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var categoryMapper = cols[3].mapper;

navigationIndex

Type:: number
Default:: null

Specifies the navigation index of the cell for the TAB sequence when the cells are in edit mode in a Multi-Row Layout grid. Has no effect otherwise. Here you can find more about the Multi-Row Layout feature.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
        { headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3, navigationIndex: 1 },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0, navigationIndex: 2 },
        { headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1, navigationIndex: 4 },
        { headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2, navigationIndex: 3 }
    ]
});
//Get
var colIndex = $(".selector").igHierarchicalGrid("option", "columns")[1].navigationIndex;

rowIndex

Type:: number
Default:: null

Specifies the row index of the cell in a Multi-Row Layout configuration. All columns must have this property set for the multi-row-layout mode to be enabled. Here you can find more about the Multi-Row Layout feature.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
        { headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
        { headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
        { headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
    ]
});
 
//Get
var rowIndex = $(".selector").igHierarchicalGrid("option", "columns")[0].rowIndex;

rowspan
Deprecated

Type:

number

Default:

0

This option has been deprecated as of the June 2016 service release.
Adjust span of multi column header cell. Use option rowSpan.

rowSpan

Type:: number
Default:: 1

Specifies the rowSpan of the cell in a Multi-Row Layout configuration. rowSpan 0 is not supported and will be changed to 1 by the grid. Here you can find more about the Multi-Row Layout feature. If multi-row-layout is not used but multi-column-header is set then this option is used to adjust span of header cell.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0, rowSpan: 2 },
        { headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 1 },
        { headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 2 },
        { headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 3 },
    ]
});
 
//Get
var rowSpan = $(".selector").igHierarchicalGrid("option", "columns")[0].rowSpan;

template

Type:: string
Default:: null

Sets a template for an individual column. the contents of the template should be the HTML markup that goes inside the table cell, or the entire table cell markup. Here's an example of creating a basic column template.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", dataType: "string", template: "Product: ${Name}" },
    ]
});
 
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var template = cols[0].template;

unbound

Type:: bool
Default:: false

Sets whether column data is derived from the datasource. If set to true, then the cells in this column are not bound to the data source. The data in this column is populated using formula, or using unboundValues, or through the setUnboundValues API method. Here's an overview of the unbound columns feature.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        {
            headerText: "Promotion Expired Date",
            key: "PromExpDate",
            dataType: "date",
            unbound: true,
            unboundValues: [
                new Date('4/24/2016'),
                new Date('8/24/2016'),
                new Date('6/24/2016'),
                new Date('10/24/2016'),
                new Date('11/24/2016')
            ]
        }
    ]
});
 
// Get
var unboundColumn = $(".selector").igHierarchicalGrid('getUnboundColumnByKey', 'PromExpDate');
var isUnbound = unboundColumn.unbound;

unboundValues

Type:: array
Default:: null
Elements Type:

Array of values which will be populated in the column cells at initialization, if the column is unbound.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        {
            headerText: "Promotion Expired Date",
            key: "PromotionExpDate",
            dataType: "date",
            unbound: true,
            unboundValues: [
                new Date('4/24/2016'),
                new Date('8/24/2016'),
                new Date('6/24/2016'),
                new Date('10/24/2016'),
                new Date('11/24/2016')
            ]
        }
    ]
});

width

Type:: enumeration
Default:: null

Width of the column in pixels or percentage. Can also be set as '*', in which case the width auto-size based on the content of the column cells (including the header text). If width is not defined and defaultColumnWidth is set, it is assumed for all columns.

Members

string
Type:string
The column width can be set in pixels (px), percentage (%) or as '*' in order to auto-size based on the cells and header content.
number
Type:number
The column width can be set as a number.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product Name", key: "Name", width: "100px", dataType: "string" },
    ]
});
// Get
var cols = $(".selector").igHierarchicalGrid("option", "columns");
var productNameWidth = cols[0].width;

columnVirtualization
Inherited

Type:

bool

Default:

false

Enables virtualization for columns only. Column virtualization can work only in combination with fixed row virtalization. Setting columnVirtualization to true will automatically set virtualization to true and virtualizationMode to "fixed".

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
columnVirtualization : true
});

// Get
var columnVirtualization = $(".selector").igHierarchicalGrid("option", "columnVirtualization");

dataSource
Inherited

Type:: enumeration
Default:: null

Can be any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.

Members

string
Type:string
DataSource as a string. For example a Url.
array
Type:array
DataSource as an array.
object
Type:object
DataSource as an object. For example a JSON object.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    dataSource : ds
});
//Get
var ds = $(".selector").igHierarchicalGrid("option", "dataSource");
Note:
This code will return the original data source used when initializing the grid.
To get the igDataSource instance use the following syntax:
var igDs = $(".selector").data("igHierarchicalGrid").dataSource;
//Set
$(".selector").igHierarchicalGrid("option", "dataSource", ds);

dataSourceType
Inherited

Type:

string

Default:

null

Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource type.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
dataSourceType : "xml"
});

//Get
var dsType = $(".selector").igHierarchicalGrid("option", "dataSourceType");
dataSourceUrl
Inherited

Type:

string

Default:

null

Specifies a remote URL as a data source, from which data will be retrieved using the $.ig.DataSource.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
dataSourceUrl : urlString
});

//Get
var urlString = $(".selector").igHierarchicalGrid("option", "dataSourceUrl");

defaultChildrenDataProperty

Type:: string
Default:: "children"

Specifies the default property in the response where children will be located.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    defaultChildrenDataProperty: "childLayout"
});
//Get
var defaultChildrenDataProperty = $(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty");
 
//Set
$(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty", "childLayout");

defaultColumnWidth
Inherited

Type:

enumeration

Default:

null
Default column width that will be set for all columns, that don't have column width defined.
Members
- string
- Type:string
- The default column width can be set in pixels ("100px").
- number
- Type:number
- The default column width can be set in pixels as a number (100).
Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
defaultColumnWidth : 100
});
// Get
var width = $(".selector").igHierarchicalGrid("option", "defaultColumnWidth");
enableHoverStyles
Inherited

Type:

bool

Default:

true

Enables/disables rendering of hover styles when the mouse is over a record. This can be useful in templating scenarios, for example, where we don't want to apply hover styling to templated content.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
enableHoverStyles : false
});

//Get
var enableHoverStyles = $(".selector").igHierarchicalGrid("option", "enableHoverStyles");

enableResizeContainerCheck
Inherited

Type:: bool
Default:: true

Enables/disables grid adjusting its dimensions when its width and/or height is set in percent (%) and grid parent DOM container is resized.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    enableResizeContainerCheck : false
});
 
//Get
var enableResizeContainerCheck = $(".selector").igHierarchicalGrid("option", "enableResizeContainerCheck");
 
//Set
$(".selector").igHierarchicalGrid("option", "enableResizeContainerCheck", false);

enableUTCDates
Inherited

Type:: bool
Default:: false

Nables/Disables serializing client date as UTC ISO 8061 string instead of using the local time and zone values.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    enableUTCDates : true
});
 
//Get
var enableUTCDates = $(".selector").igHierarchicalGrid("option", "enableUTCDates");
 
//Set
$(".selector").igHierarchicalGrid("option", "enableUTCDates", true);

expandCollapseAnimations

Type:: bool
Default:: true

Applies a linear animation - either expanding or collapsing depending on the parent row state.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    expandCollapseAnimations: true
});
 
//Get
var expandCollapseAnimations = $(".selector").igHierarchicalGrid("option", "expandCollapseAnimations");
//Set
$(".selector").igHierarchicalGrid("option", "expandCollapseAnimations", true);

expandColWidth

Type:

number

Default:

30

Specifies the expand column width.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
expandColWidth: 50
});

//Get
var expandColWidth = $(".selector").igHierarchicalGrid("option", "expandColWidth");

expandTooltip
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies the default tooltip applied to an expand column cell, that is currently collapsed. Use option locale.columnChooserCaptionText.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    expandTooltip: "Custom expnad tooltip text"
});
 
//Get
var accessibility = $(".selector").igHierarchicalGrid("option", "expandTooltip");
 
//Set
$(".selector").igHierarchicalGrid("option", "expandTooltip", "Custom expnad tooltip text");
$(".selector").igHierarchicalGrid("dataBind");

featureChooserIconDisplay
Inherited

Type:: enumeration
Default:: desktopOnly

Configures how the feature chooser icon should display on header cells - e.g. to display as gear icon or not.

Members

none
Type:string
Always hide the feature chooser icon; The feature chooser is shown on tapping/clicking the column header.
desktopOnly
Type:string
Always show the icon on desktop but hide when touch device detected.
always
Type:string
Always show it in any environment. Chooser is shown when tapping the gear icon or column header.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    featureChooserIconDisplay : "always"
});
//Get
var featureChooserIconDisplay = $(".selector").igHierarchicalGrid("option", "featureChooserIconDisplay");

features
Inherited

Type:: array
Default:: []
Elements Type:: object

List of grid feature definitions: sorting, paging, etc. Each feature goes with its separate options that are documented for the feature accordingly. Here you can find detailed documentation for all igGrid features.

Code Sample

    //Initialize
    $(".selector").igHierarchicalGrid({
features: [
    {
                name: "Paging",
                type: "local",
                pageSize: 13
            },
            {
                name: "Sorting",
                type: "local"
            },
            {
                name: "Selection"
            },
            {
                name: "Filtering",
                type: "local",
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            }
        ]
    });
 
    //Get
    var features = $(".selector").igHierarchicalGrid("option", "features");

name

Type:

string

Default:

null

Name of the feature to be enabled.

fixedFooters
Inherited

Type:: bool
Default:: true

Footers will be fixed if this option is set to true, and only the grid data will be scrollable. If virtualization is enabled, fixedFooters will always act as if it's true, no matter which value is set.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    fixedFooters : false
});
 
//Get
var fixed = $(".selector").igHierarchicalGrid("option", "fixedFooters");
 
//Set
$(".selector").igHierarchicalGrid("option", "fixedFooters", false);

fixedHeaders
Inherited

Type:

bool

Default:

true

Headers will be fixed if this option is set to true, and only the grid data will be scrollable. If virtualization is enabled, fixedHeaders will always act as if it's true, no matter which value is set.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
fixedHeaders : false
});

//Get
var fixedHeaders = $(".selector").igHierarchicalGrid("option", "fixedHeaders");

height
Inherited

Type:: enumeration
Default:: null

This is the total height of the grid, including all UI elements - scroll container with data rows, header, footer, filter row - (if any), etc. Here you can find more info about setting igGrid height.

Members

string
Type:string
The widget height can be set in pixels (px) and percentage (%).
number
Type:number
The widget height can be set as a number.
null
Type:object
will stretch vertically to fit data.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    height : "850px"
});
// Get
var height = $(".selector").igHierarchicalGrid("option", "height");
// Set
$(".selector").igHierarchicalGrid("option", "height", "800px");

initialDataBindDepth

Type:

number

Default:

-1

Only the first level will be data-bound initially. Also serves as "render" depth, meaning that depending on this prop, the grid will render the child grids up to the specified level.

Code Sample

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

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

Type:

number

Default:

-1

No levels will be automatically expanded when the widget is instantiated for the first time.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
initialExpandDepth: 1
});

//Get
var initialExpandDepth = $(".selector").igHierarchicalGrid("option", "initialExpandDepth");
jsonpRequest
Inherited

Type:

bool

Default:

false

When dataSource is a remote URL, defines whether to set the type of the remote data source to JSONP.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
jsonpRequest : true
});

//Get
var jsonpRequest = $(".selector").igHierarchicalGrid("option", "jsonpRequest");

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

    //Initialize
$(".selector").igHierarchicalGrid({
    language: "ja"
});
 
// Get
var language = $(".selector").igHierarchicalGrid("option", "language");
 
// Set
$(".selector").igHierarchicalGrid("option", "language", "ja");

locale

Type:: object
Default:: {}

collapseTooltip

Type:: string
Default:: ""

Specifies the default tooltip applied to an expand column cell, that is currently expanded.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    locale: {
        collapseTooltip: "Collapse"
    }
});
 
//  Get
var text = $(".selector").igHierarchicalGrid("option", "locale").collapseTooltip;
 
//  Set
$(".selector").igHierarchicalGrid("option", "locale", { collapseTooltip: "Collapse" });

expandTooltip

Type:: string
Default:: ""

Specifies the default tooltip applied to an expand column cell, that is currently collapsed.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    locale: {
        expandTooltip: "Expand"
    }
});
 
//  Get
var text = $(".selector").igHierarchicalGrid("option", "locale").expandTooltip;
 
//  Set
$(".selector").igHierarchicalGrid("option", "locale", { expandTooltip: "Expand" });

localSchemaTransform
Inherited

Type:

bool

Default:

true

If this option is set to false, the data to which the grid is bound will be used "as is" with no additional transformations based on columns defined. Otherwise only the subset of data properties used in the columns defined will be extracted in a new object and used.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
localSchemaTransform : false
});

//Get
var schemaTransform = $(".selector").igHierarchicalGrid("option", "localSchemaTransform");
maxDataBindDepth

Type:

number

Default:

-1

Specifies the limit on the number of levels to bind to.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
maxDataBindDepth: 3
});

//Get
var maxDataBindDepth = $(".selector").igHierarchicalGrid("option", "maxDataBindDepth");

mergeUnboundColumns
Inherited

Type:: bool
Default:: false

Merge unbound columns values inside data source when data source is remote. If true then the unbound columns are merged to the data source at runtime on the server. Note that data source is expanded with the new data and this could cause performance issues when the data is huge. If mergeUnboundColumns is false then the unbound data is sent and merged on the client. This option is used by the igGrid MVC Helper.
Checkout Populating Unbound Columns Remotely (igGrid) topic for more information.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    mergeUnboundColumns : true,
    dataSource : REMOTE_URL
});
 
//Get
var mergeUC = $(".selector").igHierarchicalGrid("option", "mergeUnboundColumns");

odata

Type:: bool
Default:: false

If true, encodes all requests using OData conventions and the $expand syntax.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    odata: true
});
 
//Get
var odata = $(".selector").igHierarchicalGrid("option", "odata");
 
//Set
$(".selector").igHierarchicalGrid("option", "odata", true);

pathSeparator

Type:

string

Default:

"/"

Specifies the delimiter for constructing paths , for hierarchical lookup of data.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
pathSeparator: "/"
});

//Get
var pathSeparator = $(".selector").igHierarchicalGrid("option", "pathSeparator");
primaryKey
Inherited

Type:

string

Default:

null

Key of the column containing unique identifiers for the data records.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
primaryKey : "CustomerID"
});

//Get
var key = $(".selector").igHierarchicalGrid("option", "primaryKey");

regional
Inherited

Type:: enumeration
Default:: defaults

Set/Get the regional setting for the widget.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    regional: "ja"
});
// Get
var regional = $(".selector").igHierarchicalGrid("option", "regional");
// Set
$(".selector").igHierarchicalGrid("option", "regional", "ja");

renderCheckboxes
Inherited

Type:: bool
Default:: false

Gets sets ability to render checkboxes and use checkbox editor when dataType of a column is "bool". Checkboxes are not rendered for boolean values in columns with a column template.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    renderCheckboxes : true
});
 
//Get
var renderCheckboxes = $(".selector").igHierarchicalGrid("option", "renderCheckboxes");
 
//Set
$(".selector").igHierarchicalGrid("option", "renderCheckboxes", true);

requestType
Inherited

Type:

string

Default:

"GET"

Specifies the HTTP verb to be used to issue the requests to a remote data source.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
requestType : "POST"
});

//Get
var requestType = $(".selector").igHierarchicalGrid("option", "requestType");

responseContentType
Inherited

Type:: string
Default:: "application/json; charset=utf-8"

Content type of the response. See http://api.jquery.com/jQuery.ajax/ => contentType.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    responseContentType : "application/json; charset=utf-8"
});
 
//Get
var responseContentType = $(".selector").igHierarchicalGrid("option", "responseContentType");

responseDataKey
Inherited

Type:

string

Default:

null

See $.ig.DataSource responseDataKey. This is the property in the responses where data records are held, if the response is wrapped.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
responseDataKey : "records"
});

//Get
var responseKey = $(".selector").igHierarchicalGrid("option", "responseDataKey");
responseTotalRecCountKey
Deprecated

Type:

string

Default:

null

See $.ig.DataSource responseTotalRecCountKey. Property in the response specifying the total number of records on the server.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
responseTotalRecCountKey : "totalRecords"
});

//Get
var recordsCount = $(".selector").igHierarchicalGrid("option", "responseTotalRecCountKey");
rest

Type:

bool

Default:

false

If true, load on demand will be achieved using REST compliant resource access with appropriate url-s for
the ajax GET calls.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
rest: true
});

//Get
var rest = $(".selector").igHierarchicalGrid("option", "rest");

restSettings
Inherited

Type:: object
Default:: {}

Settings related to REST compliant update routines.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        create: {
            url: "/api/customers/",
            batch: true
        },
        update: {
            url: "/api/customers/",
            batch: true
        },
        remove: {
            url: "/api/customers/",
            batch: true
        }
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");

contentSerializer

Type:: function
Default:: null

Specifies a custom function to serialize content sent to the server. It should accept a single object or an array of objects and return a string. If not specified, JSON.stringify() will be used.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        contentSerializer : "customSerializeFunction" ; // the name of the function, it can be also a reference to a function
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
var contentSerializerSetting = restSettings.contentSerializer;

contentType

Type:: string
Default:: "application/json; charset=utf-8"

Specifies the content type of the request. See http://api.jquery.com/jQuery.ajax/ => contentType.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        contentType : "application/json; charset=utf-8";
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
var contentTypeSetting = restSettings.contentType;

create

Type:: object
Default:: {}

Settings for create requests.

Code Sample

    //Initialize
    $(".selector").igHierarchicalGrid({
        restSettings : {
create: {
                url: "/api/customers/",
                batch: true
            }
        }
    });
 
    //Get
    var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
    var createRestSettings = restSettings.create;

batch

Type:: bool
Default:: false

Specifies whether create requests will be sent in batches.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        create: {
            url: "/api/customers/",
            batch: true
        }
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
var batch = restSettings.create.batch;

template

Type:: string
Default:: null

Specifies a remote URL template. Use ${id} in place of the resource id.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        update: {
            template: "/api/customers/${id}"
        }
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
var template = restSettings.update.template;

url

Type:: string
Default:: null

Specifies a remote URL to which create requests will be sent. This will be used for both batch and non-batch, however if template is also set, this URL will only be used for batch requests.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    restSettings : {
        update: {
            url: "/api/customers/",
            batch: true
        }
    }
});
 
//Get
var restSettings = $(".selector").igHierarchicalGrid("option", "restSettings");
var url = restSettings.update.url;

encodeRemoveInRequestUri

Type:

bool

Default:

true

Specifies whether the ids of the removed resources are send through the request URI.
remove

Type:

object

Default:

{}
Settings for remove requests.
- batch
  
  Type:
  
  bool
  
  Default:
  
  false
  
  Specifies whether update requests will be sent in batches.
- template
  
  Type:
  
  string
  
  Default:
  
  null
  
  Specifies a remote URL template. Use ${id} in place of the resource id.
- url
  
  Type:
  
  string
  
  Default:
  
  null
  
  Specifies a remote URL to which remove requests will be sent. This will be used for both batch and non-batch, however if template is also set, this URL will only be used for batch requests.
update

Type:

object

Default:

{}
Settings for update requests.
- batch
  
  Type:
  
  bool
  
  Default:
  
  false
  
  Specifies whether update requests will be sent in batches.
- template
  
  Type:
  
  string
  
  Default:
  
  null
  
  Specifies a remote URL template. Use ${id} in place of the resource id.
- url
  
  Type:
  
  string
  
  Default:
  
  null
  
  Specifies a remote URL to which update requests will be sent. This will be used for both batch and non-batch, however if template is also set, this URL will only be used for batch requests.

rowVirtualization
Inherited

Type:

bool

Default:

false

Enables virtualization for rows only. Here you can find more info about igGrid row virtualization.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
rowVirtualization : true
});

// Get
var virtualization = $(".selector").igHierarchicalGrid("option", "rowVirtualization");

scrollSettings
Inherited

Type:: object
Default:: {}

Settings related to content scrolling.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        scrollTop: 100,
        smoothing: true,
        smoothingStep: 2.5
    }
});
 
//Get
var scrollSettings = $(".selector").igHierarchicalGrid("option", "scrollSettings");
 
//Set
var newSettings = {
    scrollTop: 100,
    smoothing: true,
    smoothingStep: 2.5
}
$(".selector").igHierarchicalGrid("option", "scrollSettings", newSettings);

inertiaDuration

Type:: number
Default:: 1

Sets gets the modifier for how long the inertia last on touch devices.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        inertiaDuration: 0.75
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").inertiaDuration;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { inertiaDuration: 0.75 });

inertiaStep

Type:: number
Default:: 1

Sets gets the modifier for how much the inertia scrolls on touch devices. Note: Value set to 0 would disable touch movements. Value set to -1 would invert them.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        inertiaStep: 2
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").inertiaStep;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { inertiaStep: 2 });

scrollLeft

Type:: number
Default:: 0

Sets gets current horizontal position.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        scrollLeft: 200
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").scrollLeft;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { scrollLeft: 300 });

scrollTop

Type:: number
Default:: 0

Sets gets current vertical position.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        scrollTop: 500
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").scrollTop;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { scrollTop: 600 });

smoothing

Type:: bool
Default:: false

Sets gets if smoother scrolling with small intertia should be used when using the mouse wheel.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        smoothing: true
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").smoothing;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { smoothing: true });

smoothingDuration

Type:: number
Default:: 1

Sets or gets the modifier for how long the scroll ‘animation’ lasts when using the mouse wheel once. This is used only for the smooth scrolling behavior.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        smoothingDuration: 1.25
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").smoothingDuration;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { smoothingDuration: 1.25 });

smoothingStep

Type:: number
Default:: 1

Sets or gets the modifier for how many pixels will be scrolled when using the mouse wheel once. This is used only for the smooth scrolling behavior.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        smoothingStep: 2.5
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").smoothingStep;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { smoothingStep: 2.5 });

wheelStep

Type:: number
Default:: 50

Sets gets the step of the default scrolling behavior when using the mouse wheel.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    scrollSettings: {
        wheelStep: 100
    }
});
 
//Get
var value = $(".selector").igHierarchicalGrid("option", "scrollSettings").wheelStep;
 
//Set
$(".selector").igHierarchicalGrid("option", "scrollSettings", { wheelStep: 50 });

serializeTransactionLog
Inherited

Type:

bool

Default:

true

If true, the transaction log will always be sent in the request for remote data, by the data source. Also this means that if there are values in the log, a POST will be performed instead of GET.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
serializeTransactionLog : false
});

//Get
var log = $(".selector").igHierarchicalGrid("option", "serializeTransactionLog");

showFooter
Inherited

Type:: bool
Default:: true

Controls the visibility of the grid footer.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    showFooter : false
});
 
//Get
var showFooter = $(".selector").igHierarchicalGrid("option", "showFooter");
 
//Set
$(".selector").igHierarchicalGrid("option", "showFooter", false);

showHeader
Inherited

Type:: bool
Default:: true

Controls the visibility of the grid header.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    showHeader : false
});
 
//Get
var showHeader = $(".selector").igHierarchicalGrid("option", "showHeader");
 
//Set
$(".selector").igHierarchicalGrid("option", "showHeader", false);

tabIndex
Inherited

Type:

number

Default:

0

Initial tabIndex attribute that will be set on all focusable elements.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
tabIndex : 3
});

//Get
var tabIndex = $(".selector").igHierarchicalGrid("option", "tabIndex");
templatingEngine
Inherited

Type:

enumeration

Default:

infragistics
The templating engine that will be used to render the grid column templates. Here you can find how to use templating engines other than igTemplating and jsRender.
Members
- infragistics
- Type:string
- The grid will use the Infragistics Templating engine to render its column templates and specific parts of the UI.
- jsRender
- Type:string
- The grid will use jsRender to render its column templates and specific parts of the UI.
Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
templatingEngine : "jsRender"
});
// Get
var templatingEngine = $(".selector").igHierarchicalGrid("option", "templatingEngine");
updateUrl
Inherited

Type:

string

Default:

null

URL to which updating requests will be made.

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
updateUrl : "http://mydomain.com/UpdateCustomer"
});

//Get
var updateUrl = $(".selector").igHierarchicalGrid("option", "updateUrl");
virtualization
Inherited

Type:

bool

Default:

false

Enables/disables column and row virtualization at the same time. Virtualization can greatly enhance rendering performance. If enabled, the number of actual rendered rows (DOM elements) will be constant and related to the visible viewport of the grid. As the end user scrolls, those DOM elements will be dynamically reused to render the new data. Here you can find more info about the performance guidelines when using the igGrid.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
virtualization : true
});

// Get
var virtualization = $(".selector").igHierarchicalGrid("option", "virtualization");

virtualizationMode
Inherited

Type:: enumeration
Default:: fixed

Determines row virtualization mode.

Members

fixed
Type:string
Renders only the visible rows and/or columns in the grid. On scrolling the same rows and/or columns are updated with new data from the data source. Only fixed virtualization can work with column virtualization at the same time. Fixed virtualization is not supported by some grid features: Resizing, Group By, Responsive.
continuous
Type:string
renders a pre-defined number of rows in the grid. On scrolling the continuous virtualization loads another portion of rows and disposes the current one.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    virtualizationMode : "continuous"
});
// Get
var virtualizationMode = $(".selector").igHierarchicalGrid("option", "virtualizationMode");
// Set
$(".selector").igHierarchicalGrid("option", "virtualizationMode", "continuous");

virtualizationMouseWheelStep
Inherited

Type:: number
Default:: null

Number of pixels to scroll the grid by, when virtualization is enabled, and mouse wheel scrolling is performed over the virtual grid area. If "null" the step will be equal to the avgRowHeight.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    virtualizationMouseWheelStep : 50
});
 
// Get
var virtualizationStep = $(".selector").igHierarchicalGrid("option", "virtualizationMouseWheelStep");
 
// Set
$(".selector").igHierarchicalGrid("option", "virtualizationMouseWheelStep", 50);

width
Inherited

Type:: enumeration
Default:: null

Defines the grid width in pixels or percents. Here you can find more info about setting igGrid width.

Members

string
Type:string
The widget width can be set in pixels (px) or percentage (%). Example values: "800px", "800" (defaults to pixels), "100%".
number
Type:number
The widget width can be set in pixels as a number. Example values: 800, 700.
null
Type:object
will stretch to fit the sum of the columns widths.

Code Sample

// Initialize
$(".selector").igHierarchicalGrid({
    width : "800px"
});
// Get
var width = $(".selector").igHierarchicalGrid("option", "width");
// Set
$(".selector").igHierarchicalGrid("option", "width", "850px");

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

captionRendered
Inherited

Cancellable:: false

Event fired after the caption has been rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    captionRendered: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
        //return caption container DOM element
        ui.captionContainer;
    }
});

captionRendering
Inherited

Cancellable:

true

Event fired before the caption starts its rendering.
Return false in order to cancel caption rendering.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    captionRendering: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
    }
});

cellClick
Inherited

Cancellable:: false

Event fired when a cell is clicked.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridcellclick", ".selector", function (evt, ui) {
    //return cell html element in the DOM
    ui.cellElement;
    //return row index
    ui.rowIndex;
    //return row key
    ui.rowKey;
    //return col index of the DOM element
    ui.colIndex;
    //return col key
    ui.colKey;
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    cellClick: function(evt, ui) {...}
});

cellRightClick
Inherited

Cancellable:: false

Event fired when a cell is right clicked.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

$(document).on("ighierarchicalgridcellrightclick", ".selector", function (evt, ui) {
//return cell html element in the DOM
ui.cellElement;
//return row index
ui.rowIndex;
//return row key
ui.rowKey;
//return col index of the DOM element
ui.colIndex;
//return col key
ui.colKey;
//return reference to igHierarchicalGrid
ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    cellRightClick: function(evt, ui) {...}
});

childGridCreated

Cancellable:: false

Event fired after a child grid is created.

evt
Type: Event

JQuery event object.

Code Sample

//Bind after initialization
$(document).on("igchildgridcreated", ".selector", function (evt, ui) {
 
    //the triggered event
    evt;
    //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
    evt.target;
    //reference to the DOM object which triggered the event
    evt.currentTarget;
    //type of the event according to the jQuery UI convention: "igchildgridcreated"
    evt.type;
 
    // reference to the created child grid DOM element
    ui.element
    //reference to the Hierarchical grid widget
    ui.owner;
});

childGridCreating

Cancellable:: true

Event fired before a child grid is going to be created, allows the developer to override the child grid creation.

evt
Type: Event

JQuery event object.

Code Sample

//Bind after initialization
$(document).on("igchildgridcreating", ".selector", function (evt, ui) {
    //the triggered event
    evt;
    //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
    evt.target;
 
    //reference to the DOM object which triggered the event
    evt.currentTarget;
 
    //type of the event according to the jQuery UI convention:  "igchildgridcreating"
    evt.type;
 
    // reference to the child grid DOM element which is to be created
    ui.element
 
    // reference to the options of the child grid which is to created
    ui.options
 
    // reference to the Hierarchical grid widget
    ui.owner;
 
    // reference to the path to the child grid which is to be created
    ui.path
});

childGridRendered

Cancellable:: false

Event fired when child grid is rendered.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

$(document).on("igchildgridrendered", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    //reference to the hierarchical grid object
    ui.owner;
 
    //reference to the row element for the row that's about to be populated
    ui.parentrow;
 
    //reference to the child grid
    ui.childgrid;
});

childrenPopulated

Cancellable:: false

Event which is fired when children have been populated (Load on demand).

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridchildrenpopulated", ".selector", function (evt, ui) {
 
    //return the triggered event
    evt;
    //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
    evt.target;
    //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
    evt.currentTarget;
    //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulated'
    evt.type;
 
    //custom row id that is combination from the primaryKey and the id of the row
    ui.id;
 
    //reference to the Hierarchical grid widget
    ui.owner;
    //gets all igHierarchical Grid widgets
    ui.owner.allChildrenWidgets;
 
    //jQuery wrapper of the parent row object
    ui.parentrow;
    //get the HTML DOM row object
    ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    childrenPopulated : function(e, args) {...}
});

childrenPopulating

Cancellable:: true

Event which is fired when children are about to be populated (Load on demand).

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridchildrenpopulating", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
    evt.target;
    //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
    evt.currentTarget;
    //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulating'
    evt.type;
 
    //custom row id that is combination from the primaryKey and the id of the row
    ui.id;
    //reference to the Hierarchical grid widget
    ui.owner;
    //gets all igHierarchical Grid widgets
    ui.owner.allChildrenWidgets;
 
    //jQuery wrapper of the parent row object
    ui.parentrow;
    //get the HTML DOM row object
    ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    childrenPopulating : function(e, args) {...}
});

columnsCollectionModified
Inherited

Cancellable:: false

Event fired after the columns colection has been modified(e.g. a column is hidden).

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridcolumnscollectionmodified", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    columnsCollectionModified: function(evt, ui) {...}
});

created
Inherited

Cancellable:

false

Fired when the grid is created and the initial structure is rendered (this doesn't necessarily imply the data will be there if the data source is remote).
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Bind before the igHierarchicalGrid initialization code
$(document).on("igcontrolcreated", ".selector", function (evt, ui) {
//return reference to igHierarchicalGrid
ui.owner;
});

dataBinding
Inherited

Cancellable:: true

Event fired before data binding takes place.

Return false in order to cancel data binding.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgriddatabinding", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    dataBinding: function(evt, ui) {...}
});

dataBound
Inherited

Cancellable:: false

Event fired after data binding is complete.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgriddatabound", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    dataBound: function(evt, ui) {...}
});

dataRendered
Inherited

Cancellable:: false

Event fired after all of the data records in the grid table body have been rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgriddatarendered", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    dataRendered: function(evt, ui) {...}
});

dataRendering
Inherited

Cancellable:: true

Event fired before the TBODY holding the data records starts its rendering.
Return false in order to cancel data records rendering.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgriddatarendering", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
    //return grid's table body DOM element
    ui.tbody;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    dataRendering: function(evt, ui) {...}
});

destroyed
Inherited

Cancellable:

false

Fired when the grid is destroyed.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Bind after initialization
$(document).on("igcontroldestroyed", ".selector", function (evt, ui) {
//return reference to igHierarchicalGrid
ui.owner;
});

footerRendered
Inherited

Cancellable:: false

Event fired after the footer has been rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    footerRendered: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
        //return footer html element in the DOM
        ui.table;
    }
});

footerRendering
Inherited

Cancellable:

true

Event fired before the footer starts its rendering.

Return false in order to cancel footer rendering.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    footerRendering: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
    }
});

headerCellRendered
Inherited

Cancellable:: false

Event fired after every TH in the grid header has been rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    headerCellRendered: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
        //return column key
        ui.columnKey;
        //return header cell DOM element
        ui.th;
    }
});

headerRendered
Inherited

Cancellable:: false

Event fired after the header has been rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    headerRendered: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
        //return headers table DOM element
        ui.table;
    }
});

headerRendering
Inherited

Cancellable:

true

Event fired before the header starts its rendering.
Return false in order to cancel header rendering.
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    headerRendering: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
    }
});
rendered
Inherited

Cancellable:

false

Event fired after the whole grid widget has been rendered (including headers, footers, etc.).
This event is fired only when the grid is being initialized.
It will not be fired if the grid is rebound to its data
(for example, when calling the dataBind() API method
or when changing the page size (when paging is enabled)).
- evt
  Type: Event
  
  JQuery event object.
- ui
  Type: Object
Code Sample

//Initialize
$(".selector").igHierarchicalGrid({
    rendered: function(evt, ui) {
        //return reference to igHierarchicalGrid
        ui.owner;
    }
});

rendering
Inherited

Cancellable:: true

Event fired before the grid starts rendering (all contents).
This event is fired only when the grid is being initialized.
It will not be fired if the grid is rebound to its data
(for example, when calling the dataBind() API method
or when changing the page size (when paging is enabled)).
Return false in order to cancel grid rendering.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrendering", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rendering: function(evt, ui) {...}
});

requestError
Inherited

Cancellable:: false

Event fired if there is an error in the request, when the grid is doing a remote operation,
such as data binding, paging, sorting, etc.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrequesterror", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner
    //return error message coming from the server
    ui.message
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    requestError: function(evt, ui) {...}
});

rowCollapsed

Cancellable:: false

Event which is fired when a hierarchical row has been collapsed.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowcollapsed", ".selector", function (evt, ui) {
//return the triggered event
evt;
 
//pointer to the object that triggers the event, which in our case is igHierarchicalGrid
evt.target;
//pointer to the object that listins for the event, which in our case is igHierarchicalGrid
evt.currentTarget;
//the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsed'
evt.type;
 
//reference to the Hierarchical grid widget
ui.owner;
//gets all igHierarchical Grid widgets
ui.owner.allChildrenWidgets;
 
//jQuery wrapper of the parent row object
ui.parentrow;
//get the HTML DOM row object
ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowCollapsed : function(e, args) {...}
});

rowCollapsing

Cancellable:: true

Event which is fired when a hierarchical row is about to be collapsed.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowcollapsing", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
    //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
    evt.target;
    //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
    evt.currentTarget;
    //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsing'
    evt.type;
 
    //reference to the Hierarchical grid widget
    ui.owner;
    //gets all igHierarchical Grid widgets
    ui.owner.allChildrenWidgets;
 
    //jQuery wrapper of the parent row object
    ui.parentrow;
    //get the HTML DOM row object
    ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowCollapsing : function(e, args) {...}
});

rowExpanded

Cancellable:: false

Event which is fired after a hierarchical row has been expanded.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowexpanded", ".selector", function (evt, ui) {
    //return the triggered event
    evt
    //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
    evt.target;
    //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
    evt.currentTarget;
    //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanded'
    evt.type;
 
    //reference to the Hierarchical grid widget
    ui.owner;
    //gets all igHierarchical Grid widgets
    ui.owner.allChildrenWidgets;
 
    //jQuery wrapper of the parent row object
    ui.parentrow;
    //get the HTML DOM row object
    ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowExpanded : function(e, args) {...}
});

rowExpanding

Cancellable:: true

Event which is fired when a hierarchical row is about to be expanded.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowexpanding", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
    //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
    evt.target;
    //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
    evt.currentTarget;
    //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanding'
    evt.type;
    //reference to the Hierarchical grid widget
 
    ui.owner;
    //gets all igHierarchical Grid widgets
    ui.owner.allChildrenWidgets;
 
    //jQuery wrapper of the parent row object
    ui.parentrow;
    //get the HTML DOM row object
    ui.parentrow[0];
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowExpanding : function(e, args) {...}
});

rowsRendered
Inherited

Cancellable:: false

Event fired after data rows are rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowsrendered", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
    //return grid's table body DOM element
    ui.tbody;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowsRendered: function(evt, ui) {...}
});

rowsRendering
Inherited

Cancellable:: true

Event fired before actual data rows (TRs) are rendered.
Return false in order to cancel rows rendering.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridrowsrendering", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
    //return grid's table body
    ui.tbody;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    rowsRendering: function(evt, ui) {...}
});

schemaGenerated
Inherited

Cancellable:: false

Event fired after $.ig.DataSource schema has been generated, in case it needs to be modified.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("ighierarchicalgridschemagenerated", ".selector", function (evt, ui) {
    //return reference to igHierarchicalGrid
    ui.owner;
    //return data source schema
    ui.schema;
    //return reference to data source
    ui.dataSource;
});
 
//Initialize
$(".selector").igHierarchicalGrid({
    schemaGenerated: function(evt, ui) {...}
});

Show Details

allChildren

.igHierarchicalGrid( "allChildren" );

Return Type:

object
Returns a flat list of all child grid elements (recursive).
Code Sample

var hierarchicalGridChildren = $(".selector").igHierarchicalGrid("allChildren");
allChildrenWidgets

.igHierarchicalGrid( "allChildrenWidgets" );

Return Type:

object
Returns a flat list of all child grid widgets (not elements) - recursive.
Code Sample

var hierarchicalGridWidgets = $(".selector").igHierarchicalGrid("allChildrenWidgets");
changeGlobalLanguage
Inherited

.igHierarchicalGrid( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample

$(".selector").igHierarchicalGrid("changeGlobalLanguage");
changeGlobalRegional
Inherited

.igHierarchicalGrid( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample

$(".selector").igHierarchicalGrid("changeGlobalRegional");
changeLocale

.igHierarchicalGrid( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, see language or locale option setter.
Code Sample

$(".selector").igHierarchicalGrid("changeLocale");
changeRegional

.igHierarchicalGrid( "changeRegional" );
Changes the the regional settings of widget element to the language specified in options.regional
Note that this method is for rare scenarios, use regional option setter.
Code Sample

$(".selector").igHierarchicalGrid("changeRegional");

collapse

.igHierarchicalGrid( "collapse", id:domelement, [callback:function] );

Collapses a parent row
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

id
Type:domelement
accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
callback
Type:function
Optional
Specifies a custom function to be called when parent row is expanded(optional). Takes 2 arguments - first is hierarchical grid object, second is the row element that was collapsed.

Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
rowDomElement = parentGrid.rowAt(0);
$(".selector").igHierarchicalGrid("collapse", rowDomElement);
// OR
$(".selector").igHierarchicalGrid("collapse", rowDomElement, function () {
    // Custom code executed after the collapse operation finishes
});

collapsed

.igHierarchicalGrid( "collapsed", element:domelement );

Return Type:

bool

Return Type Description:

returns a boolean value indicating if the parent row specified by the "element" is currently collapsed or expanded.
Checks if a parent row is currently collapsed.
- element
- Type:domelement
- accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
rowDomElement = parentGrid.rowAt(0),
isCollapsed = $(".selector").igHierarchicalGrid("collapsed", rowDomElement);
commit

.igHierarchicalGrid( "commit" );
Commits pending transactions to the client data source for main and all child grids.
Code Sample

$(".selector").igHierarchicalGrid("commit");
dataBind

.igHierarchicalGrid( "dataBind" );
Data binds the hierarchical grid. No child grids will be created or rendered by default, unless there is initialExpandDepth >= 0 set.
Code Sample

$(".selector").igHierarchicalGrid("dataBind");
destroy

.igHierarchicalGrid( "destroy" );
Destroys the hierarchical grid by recursively destroying all child grids.
Code Sample

$(".selector").igHierarchicalGrid("destroy");

expand

.igHierarchicalGrid( "expand", id:domelement, [callback:function] );

Expands (toggles) a parent row
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

id
Type:domelement
accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
callback
Type:function
Optional
Specifies a custom function to be called when parent row is expanded(optional). Takes 2 arguments first is hierarchical grid object, second is the row element that was expanded.

Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
    rowDomElement = parentGrid.rowAt(0);
    $(".selector").igHierarchicalGrid("expand", rowDomElement);
    // OR
    $(".selector").igHierarchicalGrid("expand", rowDomElement, function () {
        // Custom code executed after the expand operation finishes
    });

expanded

.igHierarchicalGrid( "expanded", element:domelement );

Return Type:

bool

Return Type Description:

specifies if the row is currently expanded or collapsed.
Checks if a parent row is expanded or not.
- element
- Type:domelement
- accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
rowDomElement = parentGrid.rowAt(0),
isExpanded = $(".selector").igHierarchicalGrid("expanded", rowDomElement);
populated

.igHierarchicalGrid( "populated", element:domelement );

Return Type:

bool

Return Type Description:

returns a boolean value indicating if the parent row's child grids are populated and created.
Checks if a parent row is populated with data.
- element
- Type:domelement
- accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
rowDomElement = parentGrid.rowAt(0),
isPopulated = $(".selector").igHierarchicalGrid("populated", rowDomElement);
rollback

.igHierarchicalGrid( "rollback", [rebind:bool] );
Clears the transaction log (delegates to igDataSource). Note that this does not update the UI. In case the UI must be updated, set the second parameter "updateUI" to true, which will trigger a call to dataBind() to re-render the contents.
- rebind
- Type:bool
- Optional
- Whether to perform a rebind.
Code Sample

$(".selector").igHierarchicalGrid("rollback", true);
root

.igHierarchicalGrid( "root" );

Return Type:

object

Return Type Description:

jquery wrapped element of the root grid.
Returns the element of the root grid (igGrid).
Code Sample

var hierarchicalGridRoot = $(".selector").igHierarchicalGrid("root");
rootWidget

.igHierarchicalGrid( "rootWidget" );

Return Type:

object

Return Type Description:

widget object of the root igGrid (not igHierarchicalGrid).
Returns the widget object of the root grid (igGrid).
Code Sample

var hierarchicalGridRootWidget = $(".selector").igHierarchicalGrid("rootWidget");

saveChanges

.igHierarchicalGrid( "saveChanges", success:function, error:function );

Posts to the settings.updateUrl using $.ajax, by serializing the changes as url params.

success
Type:function
Specifies a custom function to be called when AJAX request to the updateUrl option succeeds(optional).
error
Type:function
Specifies a custom function to be called when AJAX request to the updateUrl option fails(optional).

Code Sample

//Example 1: Save changes without callbacks
$(".selector").igHierarchicalGrid("saveChanges");
 
// Example 2: Save changes with success and error callbacks
$(".selector").igHierarchicalGrid("saveChanges", function (data) {
    $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
},
function(jqXHR, textStatus, errorThrown) {
    $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
});

toggle

.igHierarchicalGrid( "toggle", element:domelement, [callback:function] );

Expands or collapses (toggles) a parent row
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.

element
Type:domelement
accepts a dom element, or a jquery wrapped dom element that should be a TR and should specify a parent row.
callback
Type:function
Optional
Specifies a custom function to be called when parent row is toggled(optional). Takes 2 arguments - first is hierarchical grid object, second is the row element that was toggled.

Code Sample

var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
    rowDomElement = parentGrid.rowAt(0);
$(".selector").igHierarchicalGrid("toggle", rowDomElement);
//OR
$(".selector").igHierarchicalGrid("toggle", rowDomElement, function () {
    // Custom code executed after the toggle operation finishes
});

ui-iggrid-childarea

Classes applied to the child grid TD container when it is expanded.
ui-iggrid-childarea-collapsed

Classes applied to the child grid TD container when it's collapsed.
ui-iggrid-childgridseparator

Achieves a "dotted-line" effect in between two child grids, excluding first and last ones.
ui-iggrid-expandbutton ui-icon-plus

Classes applied to the expand button SPAN, when it's collapsed.
ui-iggrid-expandbuttonclick ui-icon-plus

Classes applied to the expand button SPAN, when it's clicked.
ui-iggrid-expandbutton ui-iggrid-expandbuttonexpanded ui-icon-minus

Classes applied to the expand button SPAN, when it's expanded.
ui-iggrid-expandbuttonexpandedhover ui-icon-plus ui-state-hover

Classes applied to an expanded expand button span, when it's hovered.
ui-iggrid-expandbuttonhover ui-icon-plus ui-state-hover

Classes applied to a collapsed expand button span, when it's hovered.
ui-iggrid-expandcolumn

Classes that are applied to the expander column TD.
ui-iggrid-expandcolumn-expanded

Classes applied when the TD in which the expand/collapse indicator is located, is currently in expand state.
ui-iggrid-expandheadercell ui-iggrid-header ui-widget-header

Classes applied to the special header cell TH which is for the expand column.
ui-icon ui-icon-triangle-1-se

Classes applied to the SPAN holding the expand header cell icon.
ui-iggrid-root

Classes applied to the root grid's table element.

Ignite UI for jQuery | API Reference

ui.igHierarchicalGrid

Code Sample

Related Samples

Related Topics

Dependencies

Inherits