Ignite UI API Reference

If this option is set to true, ARIA and role attributes will be rendered for data records, cells and grid containers.

 
        //Initialize
        $(".selector").igGrid({
            accessibilityRendering : true
        });
        
        //Get
        var accessibilityRendering = $(".selector").igGrid("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").igGrid({
            adjustVirtualHeights : true
        });

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

        //Get
        var rowAltStyles = $(".selector").igGrid("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").igGrid({
            autoAdjustHeight : true
        });

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

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

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

        //Get
        var commit = $(".selector").igGrid("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").igGrid({
            autofitLastColumn : true
        });
     
        //Get
        var autoFit = $(".selector").igGrid("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").igGrid({
            autoFormat : "number"
        });

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

If no columns collection is defined, and autoGenerateColumns is set to true, columns will be inferred from the data source.

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

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

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

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

        //Get
        var width = $(".selector").igGrid("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").igGrid({
            avgRowHeight : 25
        });

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

Caption text that will be shown above the grid header.

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

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

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

An array of column objects.

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

• 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").igGrid({
              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").igGrid("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").igGrid({
              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").igGrid("option", "columns");
          var productIdFormat = cols[0].format;
            

• formatter

  Type:

  object

  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.

  Code Sample

    
          //Initialize
          $(".selector").igGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "In production", key: "InProduction", formatter: function(val, record) {return (val === 1)? "Yes" : "No";} }
              ]            
          });
      
          //Get
          var cols = $(".selector").igGrid("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.

  Code Sample

   
          <script type="text/javascript">
            function CalculateTotal(data, grid) {
                return data["UnitPrice"] * data["UnitsInStock"];
            }
          </script>
              
             //Initialize
          $(".selector").igGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "Total", key: "TotalUC", unbound: true,  formula:"CalculateTotal"  }
              ]            
          });
      
          //Get
          var totalUC = $('.selector').igGrid('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").igGrid({
                      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").igGridMultiColumnHeaders("getMultiColumnHeaders");
                   var group = columns[0].group;
                      

• headerText

  Type:

  string

  Default:

  null

  Column header text.

  Code Sample

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

• rowspan

  Type:

  number

  Default:

  0

  Used to adjust span of multi column header cell.

  Code Sample

   
  
                  //Initialize
                  $(".selector").igGrid({
                      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").igGridMultiColumnHeaders("getMultiColumnHeaders");
                   var rowspan = 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, 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").igGrid({
      autoGenerateColumns: false,
      columns: [
          { headerText: "Product Name", key: "Name", dataType: "string", template: "Product: ${Name}" },
      ]            
  });
   
  //Get
  var cols = $(".selector").igGrid("option", "columns");
  var template = cols[0].template;
            

• unbound

  Type:

  bool

  Default:

  false

  Sets whether column is bound to the datasource.

  Code Sample

   
           //Initialize
          $(".selector").igGrid({
              autoGenerateColumns: false,
              columns: [
                  { headerText: "Promotion Expired Date", key: "PromExpDate", dataType: "date", unbound: true},
              ]            
          });   
          // Get
          var unboundColumn = $(".selector").igGrid('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").igGrid({
                  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')]},      
                  ]            
              });
            

• width

  Type:

  enumeration

  Default:

  null

  Width of the column in pixels or percentage. Can have optional 'px' at the end. 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) and percentage (%).
  • number
  • The column width can be set as a number.

  Code Sample

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

Option to enable virtualization for columns only (horizontal).

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

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

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

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

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

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

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

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

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

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

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

Default column width that will be set for all columns.

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

        //Get
        var width = $(".selector").igGrid("option", "defaultColumnWidth");
        
        //Set
        $(".selector").igGrid("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").igGrid({
            enableHoverStyles : false
        });
        
        //Get
        var enableHoverStyles = $(".selector").igGrid("option", "enableHoverStyles");
      

Enables/disables check for resizing grid container.

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

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

        //Set
        $(".selector").igGrid("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").igGrid({
            enableUTCDates : true
        });
        
        //Get
        var enableHoverStyles = $(".selector").igGrid("option", "enableUTCDates");
      

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").igGrid({
            featureChooserIconDisplay : "always"
        });
        
        //Get
        var featureChooserIconDisplay = $(".selector").igGrid("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").igGrid({
                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").igGrid("option", "features");
     

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

        //Get
        var fixedHeaders = $(".selector").igGrid("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. .

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

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

*** 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").igGrid({
            jQueryTemplating : true
        });

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

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

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

        //Get
        var jsonpRequest = $(".selector").igGrid("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").igGrid({
            localSchemaTransform : false
        });

        //Get
        var schemaTransform = $(".selector").igGrid("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").igGrid({
            mergeUnboundColumns : true,
            dataSource : REMOTE_URL
        });

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

Primary key name of the column containing unique identifiers.

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

        //Get
        var key = $(".selector").igGrid("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").igGrid({
            renderCheckboxes : true
        });

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

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

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

        //Get
        var requestType = $(".selector").igGrid("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").igGrid({
            responseContentType : "application/json; charset=utf-8"
        });

        //Get
        var responseContentType = $(".selector").igGrid("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").igGrid({
            responseDataKey : "records"
        });

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

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

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

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

Settings related to REST compliant update routine.

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

        //Get
        var restSettings = $(".selector").igGrid("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").igGrid({
                              restSettings : {
                                  contentSerializer : "customSerializeFunction" ; // the name of the function, it can be also a reference to a function
                              }
                          });
                          
                      //Get
                          var restSettings = $(".selector").igGrid("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").igGrid({
                              restSettings : {
                                  contentType : "application/json; charset=utf-8";
                              }
                          });
                          
                     //Get
                          var restSettings = $(".selector").igGrid("option", "restSettings");
                          var contentTypeSetting = restSettings.contentType;
                      
                      

• create

  Type:

  object

  Default:

  {}

  Settings for create requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether create requests will be sent in batches.

    Code Sample

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

• remove

  Type:

  object

  Default:

  {}

  Settings for remove requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether update requests will be sent in batches.

    Code Sample

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

• update

  Type:

  object

  Default:

  {}

  Settings for update requests.

  Code Sample

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

  • batch

    Type:

    bool

    Default:

    false

    Specifies whether update requests will be sent in batches.

    Code Sample

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

        //Get
        var virtualization = $(".selector").igGrid("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").igGrid({
            serializeTransactionLog : false
        });

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

Option controlling the visibility of the grid footer.

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

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

Option controlling the visibility of the grid header.

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

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

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

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

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

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

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

        //Get
        var templatingEngine = $(".selector").igGrid("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").igGrid({
            updateUrl : "http://mydomain.com/UpdateCustomer"
        });
 
        //Get
        var updateUrl = $(".selector").igGrid("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").igGrid({
            virtualization : true
        });

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

      

Determines virtualization mode.

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

        //Get
        var virtualizationMode = $(".selector").igGrid("option", "virtualizationMode");
        
        //Set
        $(".selector").igGrid("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").igGrid({
            virtualizationMouseWheelStep : 50
        });
     
        //Get
        var virtualizationStep = $(".selector").igGrid("option", "virtualizationMouseWheelStep");
        //Set
        $(".selector").igGrid("option", "virtualizationMouseWheelStep", 50);