If this option is set to true, the height of the grid row will be calculated automatically based on the avgRowHeight and the visible virtual records. If no avgRowHeight is specified, it will be calculated automatically at runtime.

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

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

If set to true, the following behavior will take place:
If a new row is added, and then deleted, there will be no transaction added to the log.
If a new row is added, edited, then deleted, there will be no transaction added to the log.
If several edits are made to a row or an individual cell, this should result in a single transaction.
Note: This option takes effect only when autoCommit is set to false.

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

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

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

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "alternateRowStyles", true);
			 

The row expanding/collapsing animation duration in ms.

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

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

			//Set
			$(".selector").igHierarchicalGrid("option", "animationDuration", 1000);
			$(".selector").igHierarchicalGrid("dataBind");
			 

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.

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

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

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.

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

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

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.

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

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

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.

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

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.

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

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

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

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

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

			//Set
			$(".selector").igHierarchicalGrid("option", "autoGenerateLayouts", true);
			 

Used for column virtualization in fixed mode. This is the average value in pixels for a column width.

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

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.

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

Caption text that will be shown above the grid header.

 
				//Initialize
				$(".selector").igHierarchicalGrid({
					caption : "Sales Data"
				});

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

				//Set
				$(".selector").igHierarchicalGrid("option", "caption", "Sales Data");
			 

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			//Set
			$(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty", "childLayout");
			 

Default column width that will be set for all columns, that don't have column width defined.

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

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.

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

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

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

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "enableResizeContainerCheck", false);
			 

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

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "enableUTCDates", true);
			 

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

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

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

Specifies the expand column width.

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

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

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.

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

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

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

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.

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

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.

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "fixedFooters", false);
			 

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.

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

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

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.

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

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.

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

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

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

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

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

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

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

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

Set/Get the locale language setting for the widget.

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

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

				// Set
				$(".selector").igHierarchicalGrid("option", "language", "ja");
			 

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

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.

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

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

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

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

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

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.

 
				//Initialize
				$(".selector").igHierarchicalGrid({
					mergeUnboundColumns : true,
					dataSource : REMOTE_URL
				});

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

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

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

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

			//Set
			$(".selector").igHierarchicalGrid("option", "odata", true);
			 

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

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

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

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

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

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

Set/Get the regional setting for the widget.

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

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.

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "renderCheckboxes", true);
			 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Settings related to REST compliant update routines.

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

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

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

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

Settings related to content scrolling.

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

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.

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

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

Controls the visibility of the grid footer.

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "showFooter", false);
			 

Controls the visibility of the grid header.

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

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

				//Set
				$(".selector").igHierarchicalGrid("option", "showHeader", false);
			 

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

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

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

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.

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

URL to which updating requests will be made.

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

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

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.

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

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

Determines row virtualization mode.

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

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.

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

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

				// Set
				$(".selector").igHierarchicalGrid("option", "virtualizationMouseWheelStep", 50);
			 

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

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