*** IMPORTANT DEPRECATED ***
This option has been deprecated as of the June 2015 service release. Accessibility rendering is always performed by the igGrid as of version 14.2.

 
       //Initialize
        $(".selector").igTreeGrid({
            accessibilityRendering : true
        });
        
        //Get
        var accessibilityRendering = $(".selector").igTreeGrid("option", "accessibilityRendering");
      

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

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

        //Get
        var virtualHeights = $(".selector").igTreeGrid("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").igTreeGrid({
            aggregateTransactions : true
        });
        
        //Get
        var aggregateTransactions = $(".selector").igTreeGrid("option", "aggregateTransactions");
      

Enables/disables rendering of alternating row styles (odd and even rows receive different styling). Note that if a custom jQuery template is set, this has no effect and CSS for the row should be adjusted manually in the template contents.

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

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

If autoAdjustHeight is set to false, the options.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").igTreeGrid({
            autoAdjustHeight : true
        });

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

Automatically commits the transactions as rows/cells are being edited.

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

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

If autofitLastColumn is 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 entire grid.

 
      //Initialize
        $(".selector").igTreeGrid({
            autofitLastColumn : true
        });
     
        //Get
        var autoFit = $(".selector").igTreeGrid("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. date formats only Date columns.

        //Initialize
        $(".selector").igTreeGrid({
            autoFormat : "number"
        });

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

If no columns collection is defined, and autoGenerateColumns is set to true, columns will be inferred from the data source. If autoGenerateColumns is not explicitly set and columns has at least one column defined then autoGenerateColumns is automatically set to false.

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

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

used for virtualization, this is the average value in pixels for a column width.

 
      //Initialize
        $(".selector").igTreeGrid({
            avgColumnWidth : 100
        });

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

used for virtualization, this is the average value in pixels (default) that will be used to calculate how many rows and which ones to render as the end user scrolls. Also all rows' height will be automatically equal to this value.

 
       //Initialize
        $(".selector").igTreeGrid({
            avgRowHeight : 25
        });

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

Caption text that will be shown above the grid header.

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

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

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

Property name of the array of child data in a hierarchical data source.

 
      //Initialize
        $(".selector").igTreeGrid({
        childDataKey: "products"
        });
        
        //Get
        var childDataKey = $(".selector").igTreeGrid("option", "childDataKey");

        //Set
        $(".selector").igTreeGrid("option", "childDataKey", "Sales Data"); 
      

Specifies the collapse indicator tooltip text.

 
      //Initialize
      $(".selector").igTreeGrid({
      collapseTooltip : "Click here to collapse the row"
      });
 
       //Get
       var collapseTooltip = $(".selector").igTreeGrid("option", "collapseTooltipText");
      

An array of column objects.

 
       //Initialize
        $(".selector").igTreeGrid({
            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").igTreeGrid("option", "columns");
      

• columnCssClass

  Type:

  string

  Default:

  null

  Space-separated list of CSS classes to be applied on the data cells of this column.

  Code Sample

   
              <style>
                .colStyle {
                   background-color:red;
                }
      </style>
              
             $(".selector").igTreeGrid({
              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").igTreeGrid("option", "columns")[0].columnCssClass;
            

• dataType

  Type:

  enumeration

  Default:

  string

  data type of the column cell values string number bool date object.

  Members

  • string
  • number
  • bool
  • date
  • object

  Code Sample

   
              
              
            //Initialize
             $(".selector").igTreeGrid({
             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").igTreeGrid("option", "columns");
        var productIdDataType = cols[0].dataType;
            

• format

  Type:

  string

  Default:

  null

  Sets gets format for cells in column. Default value is null.
  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 igGrid. That has effect only when dataType option of column is set to "bool".

  Code Sample

   
             //Initialize
          $(".selector").igTreeGrid({
              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").igTreeGrid("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.

  Members

  • string
  • Type:string
  • string which will be used for formatting.
  • function
  • Type:function
  • function which will be used for formatting the cell values. The function should accept a value.

  Code Sample

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

• formula

  Type:

  enumeration

  Default:

  null

  a reference or name of a javascript function which will calculate the value based on other cell values in the same row when column is unbound.

  Members

  • string
  • Type:string
  • name of a javascript function.
  • function
  • Type:function
  • reference to javascript function.

  Code Sample

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

• group

  Type:

  array

  Default:

  []

  Elements Type:

  object

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

  Code Sample

   
             //Initialize
                  $(".selector").igTreeGrid({
                      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").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                   var group = columns[0].group;
            

• headerCssClass

  Type:

  string

  Default:

  null

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

  Code Sample

   
            <style>
                .colStyle {
                   background-color:red;
                }
      </style>
              
             $(".selector").igTreeGrid({
              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").igTreeGrid("option", "columns")[0].columnCssClass;
            

• headerText

  Type:

  string

  Default:

  null

  Column header text.

  Code Sample

   
             //Initialize
          $(".selector").igTreeGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "Product Name", key: "Name", dataType: "string" },
              ]            
          });
      
          //Get
          var cols = $(".selector").igTreeGrid("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').igTreeGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "Product Name", key: "Name", dataType: "string", hidden: true },
              ]            
          });
      
          //Get
          var cols = $('.selector').igTreeGrid('option', 'columns');
          var productNameHidden = cols[0].hidden;
            

• key

  Type:

  string

  Default:

  null

  Column key (property in the data source to which the column is bound).

  Code Sample

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

• rowspan

  Type:

  number

  Default:

  0

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

  Code Sample

   
              //Initialize
                  $(".selector").igTreeGrid({
                      columns: [                    
                      { headerText: "Product Data", key: "ProductData", rowspan: 2, 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").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                   var rowspan = columns[0].rowspan;
            

• rowSpan

  Type:

  number

  Default:

  0

  Used to adjust span of multi column header cell.

• 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, without any <td> and </td> tags included in front and at the end. The syntax of the template, when referencing data keys and using conditional expressions is the same as the one for rowTemplate.

  Code Sample

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

• unbound

  Type:

  bool

  Default:

  false

  Sets whether column is bound to the datasource.

  Code Sample

   
            //Initialize
          $(".selector").igTreeGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "Promotion Expired Date", key: "PromExpDate", dataType: "date", unbound: true},
              ]            
          });   
          // Get
          var unboundColumn = $(".selector").igTreeGrid('getUnboundColumnByKey', 'PromExpDate');
          var isUnbound = unboundColumn.unbound;  
            

• unboundValues

  Type:

  array

  Default:

  null

  Elements Type:

  Array of values which could be set for unbound columns at init time.

  Code Sample

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

• unboundValuesUpdateMode

  Type:

  enumeration

  Default:

  auto

  update mode of the unbound column(this option is applied ONLY when option formula is set). Auto update unbound column value whenever the record/cell is updated.

  Code Sample

              <script type="text/javascript">
                  function CalculateTotal(data, treegrid) {
                      return data["UnitPrice"] * data["UnitsInStock"];
                  }
              </script>
             //Initialize
              $(".selector").igTreeGrid({
                  autoGenerateColumns: false,
                  columns: [
                      { headerText: "Total", key: "TotalUC", unbound: true,  formula:"CalculateTotal", unboundValuesUpdateMode: "manual" }
                  ]
              });
            

• width

  Type:

  enumeration

  Default:

  null

  Width of the column in pixels or percentage. Can have optional 'px' at the end. Can also be set as '*', in which case the width autofits 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
  • 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
  • The column width can be set as a number.

  Code Sample

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

Option to enable virtualization for columns only (horizontal).

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

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

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

 
      //Initialize
        $(".selector").igTreeGrid({
            dataSource : ds
        });

        //Get
        var ds = $(".selector").igTreeGrid("option", "dataSource");
        
        //Set
        $(".selector").igTreeGrid("option", "dataSource", ds);
      

Options object to configure data source-specific settings.

 
        //Initialize
        $(".selector").igTreeGrid({
            dataSourceSettings : {
              propertyExpanded: "isExpanded",
              propertyDataLevel: "dataLevel"
            }
        });

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

• initialFlatDataView

  Type:

  bool

  Default:

  false

  If set to TRUE it is expected that the source of data is normalized and transformed(has set dataLevel and expansion state). The source of data is used as flatDataView. Usually used when the paging is remote and paging mode is allLevels, or features are remote(and the processing of the returned result should be made on the server).

  Code Sample

              //Initialize
              $(".selector").igTreeGrid({
                  dataSourceSettings : {
                    initialFlatDataView: true
                  }
              });
  
              //Get
              var dataSourceSettings = $(".selector").igTreeGrid("option", "dataSourceSettings");
            

• propertyDataLevel

  Type:

  string

  Default:

  "__ig_options.dataLevel"

  The name of the property that keeps track of the level in the hierarchy.Defaults to __ig_options.dataLevel.

  Code Sample

    
            //Initialize
          $(".selector").igTreeGrid({
              propertyDataLevel : "PDL"
          });
  
          //Get
          var propertyDataLevel = $(".selector").igTreeGrid("option", "propertyDataLevel");
            

• propertyExpanded

  Type:

  string

  Default:

  "__ig_options.expanded"

  The name of the property that keeps track of the expansion state of a data item. Defaults to __ig_options.expanded.

  Code Sample

   
             //Initialize
          $(".selector").igTreeGrid({
              propertyExpanded : "PE"
          });
  
          //Get
          var propertyExpanded = $(".selector").igTreeGrid("option", "propertyExpanded");
            

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

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

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

Specifies a remote URL as a data source, from which data will be retrieved using an AJAX call ($.ajax).

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

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

Default column width that will be set for all columns.

        //Initialize
        $(".selector").igTreeGrid({
            defaultColumnWidth : 100
        });

        //Get
        var width = $(".selector").igTreeGrid("option", "defaultColumnWidth");
        
        //Set
        $(".selector").igTreeGrid("option", "defaultColumnWidth", 100);
      

Enables/disables rendering of ui-state-hover classes 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").igTreeGrid({
            enableHoverStyles : false
        });
        
        //Get
        var enableHoverStyles = $(".selector").igTreeGrid("option", "enableHoverStyles");
      

Specifies to the tree grid if data is loaded on demand from a remote server. Default is false.

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

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

Enables/disables check for resizing grid container.

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

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

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

Enables formatting of the dates as UTC. Note that this may be desirable when the dates are coming from a backend, encoded as UTC. Otherwise, if dates are created on the client (in the browser), most probably keeping enableUTCDates to false is the desired behavior.

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

Specifies the expansion indicator tooltip text.

 
      //Initialize
      $(".selector").igTreeGrid({
      expandTooltipText : "Click here to expand the row"
      });
 
       //Get
       var collapseTooltip = $(".selector").igTreeGrid("option", "expandTooltipText");
      

Configures how the feature chooser icon should display on header cells - e.g. to display as gear icon or to not show gear icon but on click/tap the header cell to show the feature chooser.

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

A list of grid features definitions: sorting, paging, etc. Each feature goes with its separate options that are documented for the feature accordingly.

 
        //Initialize
        $(".selector").igTreeGrid({
                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").igTreeGrid("option", "features");
      

• name

  Type:

  string

  Default:

  null

  Name of the feature to be added.

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").igTreeGrid({
            fixedFooters : false
        });
     
        //Get
        var fixed = $(".selector").igTreeGrid("option", "fixedFooters");
        //Set
        $(".selector").igTreeGrid("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").igTreeGrid({
            fixedHeaders : false
        });

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

Unique identifier used in a self-referencing flat data source. Used with primaryKey to create a relationship among flat data sources.

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

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

Specifies the foreign key value in the data source to treat as the root level once the grid is data bound. Defaults to -1 (which includes the entire data source).

 
       //Initialize
        $(".selector").igTreeGrid({
            foreignKeyRootValue: "FKRV"
        });

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

This is the total height of the grid, including all UI elements - scroll container with data rows, header, footer, filter row - (if any), etc.

 
         //Initialize
        $(".selector").igTreeGrid({
            height : "850px"
        });

        //Get
        var height = $(".selector").igTreeGrid("option", "height");
        
        //Set
        $(".selector").igTreeGrid("option", "height", "850px");
      

Specifies the indentation (in pixels or percent) for a tree grid row. Nested indentation is achieved by calculating the level times the indentation value. Ex: '10px' or '5%'. Default is 30.

 
        //Initialize
        $(".selector").igTreeGrid({
            indentation: "50px"
        });

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

Specifies the depth down to which the tree grid would be expanded upon initial render. To expand all rows set value to -1. Default is -1.

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

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

If initial indentation level is set then it is used to be calculated width of the data skip column(usually used when remote load on demand is enabled).

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

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

*** IMPORTANT DEPRECATED ***
This option has been deprecated as of the 12.1 release. The igGrid now uses the custom Infragistics templating engine by default.
custom high-performance rendering will be used for rendering by default. jQuery Templating plugin can be used and enabled by setting this option to true. This will allow usage of column / row templates in jQuery Templating style. If virtualization is enabled, it is advised to keep this option to "false", in order to have better scrolling/rendering performance.

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

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

When dataSource is string defines whether to set data source of type JSONP.

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

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

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.

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

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

Merge unbound columns values inside datasource when data source is remote. If true then the unbound columns are merged to the datasource at runtime - indeed DataSource is expanded with the new data and this could cause performance issues when dataSource is huge, if false then the unbound data is sent to the client.

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

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

Primary key name of the column containing unique identifiers.

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

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

Gets sets ability to render checkboxes and use checkbox editor when dataType of a column is "bool". That option is not available when jQueryTemplating is used.

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

        //Get
        var renderCheckboxes = $(".selector").igTreeGrid("option", "renderCheckboxes");
        
        //Set
        $(".selector").igTreeGrid("option", "renderCheckboxes", true);
      

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

 
      
        //Initialize
			$(".selector").igTreeGrid({
				renderExpansionCellFunction :  function(rowData) {
						var html = '<td data-expand-cell="1" data-skip="true">', span = "";
						if(rowData.hasExpandCell){
							if(rowData.expand){
								span = '<span data-expandcell-indicator="1" class="ui-igtreegrid-expansion-column-container" style="padding-left:30px;"><span data-expand-button class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-minus" title="Click here to collapse the row" tabIndex="0"></span></span>';						
							} else {
								span = '<span data-expandcell-indicator="1" class="ui-igtreegrid-expansion-column-container" style="padding-left:30px;"><span data-expand-button class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-plus" title="Click here to expand the row" tabIndex="0"></span></span>';
							}						
							html += span;
						}					
						html +=	'</td>';
						return html;
				}
        });

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

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

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

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

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

 
       //Initialize
			$(".selector").igTreeGrid({
				renderFirstDataCellFunction : function(markup, rowData){
					var idxStart, TDSmarkup;
					idxStart = markup.indexOf("<td");
					TDSmarkup = markup.substring(idxStart);
					return TDSmarkup;
				}
			});

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

Specifies the HTTP verb to be used to issue the request.

 
       //Initialize
        $(".selector").igTreeGrid({
            requestType : "post"
        });

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

This is an internal option and should not be used.

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

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

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

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

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

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

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

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

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

Settings related to REST compliant update routine.

 
          //Initialize
        $(".selector").igTreeGrid({
            restSettings : {
                create: {
                    url: "/api/customers/",
                    batch: true
                },
                update: {
                    url: "/api/customers/",
                    batch: true
                }
                remove: {
                    url: "/api/customers/",
                    batch: true
                }
            }
        });

        //Get
        var restSettings = $(".selector").igTreeGrid("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").igTreeGrid({
                              restSettings : {
                                  contentSerializer : "customSerializeFunction" ; // the name of the function, it can be also a reference to a function
                              }
                          });
                          
                      //Get
                          var restSettings = $(".selector").igTreeGrid("option", "restSettings");
                          var contentSerializerSetting = restSettings.contentSerializer;            
                      
            

• contentType

  Type:

  string

  Default:

  "application/json; charset=utf-8"

  Specifies the content type of the request.

  Code Sample

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

• create

  Type:

  object

  Default:

  {}

  Settings for create requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether create requests will be sent in batches.

    Code Sample

                    //Initialize
            $(".selector").igTreeGrid({
                restSettings : {
                    create: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igTreeGrid("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").igTreeGrid({
                restSettings : {
                    create: {
                        template: "/api/customers/"
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igTreeGrid("option", "restSettings");
            var template = restSettings.create.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").igTreeGrid({
                restSettings : {
                    create: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igTreeGrid("option", "restSettings");
            var url = restSettings.create.url;
                  

• encodeRemoveInRequestUri

  Type:

  bool

  Default:

  true

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

  Code Sample

   
             //Initialize
          $(".selector").igTreeGrid({
              restSettings : {
                  encodeRemoveInRequestUri: true
              }
          });
  
          //Get
          var restSettings = $(".selector").igTreeGrid("option", "restSettings");
          var encodeRemoveInRequestUri = restSettings.encodeRemoveInRequestUri;
            

• remove

  Type:

  object

  Default:

  {}

  Settings for remove requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether update requests will be sent in batches.

    Code Sample

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

  • template

    Type:

    string

    Default:

    null

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

    Code Sample

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

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

    Code Sample

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

• update

  Type:

  object

  Default:

  {}

  Settings for update requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether update requests will be sent in batches.

    Code Sample

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

  • template

    Type:

    string

    Default:

    null

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

    Code Sample

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

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

    Code Sample

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

*** IMPORTANT DEPRECATED ***
This option has been deprecated as of the 14.1 release. The igGrid now uses column templates for individual column templating.
jQuery templating style template that will be used to render data records.

Option to enable virtualization for rows only (vertical).

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

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

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 done instead of GET.

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

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

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

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

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

Option controlling the visibility of the grid footer.

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

        //Get
        var showFooter = $(".selector").igTreeGrid("option", "showFooter");
        
        //Set
        $(".selector").igTreeGrid("option", "showFooter", false);
      

Option controlling the visibility of the grid header.

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

        //Get
        var showHeader = $(".selector").igTreeGrid("option", "showHeader");
        
        //Set
        $(".selector").igTreeGrid("option", "showHeader", false);
      

Initial tabIndex attribute that will be set on the container element.

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

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

the templating engine that will be used to render the grid.

 
        //Initialize
        $(".selector").igTreeGrid({
            templatingEngine : "jsRender"
        });

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

URL to which updating requests will be made. If autoCommit is true, updates will be done immediately to the data source, without keeping interim transaction logs.

 
        //Initialize
        $(".selector").igTreeGrid({
            updateUrl : "http://mydomain.com/UpdateCustomer"
        });
 
        //Get
        var updateUrl = $(".selector").igTreeGrid("option", "updateUrl");
      

Enables/disables virtualization. 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.

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

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

Determines virtualization mode.

 
       //Initialize
        $(".selector").igTreeGrid({
            virtualizationMode : "continuous"
        });

        //Get
        var virtualizationMode = $(".selector").igTreeGrid("option", "virtualizationMode");
        
        //Set
        $(".selector").igTreeGrid("option", "virtualizationMode", "continuous");
      

Number of pixels to move the grid when virtualization is enabled, and mouse wheel scrolling is performed over the virtual grid area. The "null" value will assume this is set to avgRowHeight.

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