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

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

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

 
        //Initialize
        $(".selector").igGrid({
            autoFormat : "string"
        });

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

  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) {return (val === 1)? "Yes" : "No";} }
  		    ]            
  	    });
  	
  	    //Get
  	    var cols = $(".selector").igGrid("option", "columns");
  	    var inProductionFormatter = cols[0].formatter;
            

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

• 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 and 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;
            

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

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

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
*** IMPORTANT ***
This option has been depricated as of the 12.1 release. The igGrid now uses the custom Infragistics templating engine by default.

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

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

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

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

This is an internal option and should not be used.

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

JQuery templating style template that will be used to render data records.

 
        var template = "<tr><td><span class='row_template'>ID:</span> ${ProductID} </td><td><span class='row_template'>Name: </span>  ${Name} </td></tr>",  
          
        //Initialize
        $(".selector").igGrid({
            rowTemplate: template
        });

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

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

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

Returns the current active cell if any, Selection must be enabled.

Returns the current active row if any, Selection must be enabled.

Returns all data rows recursively, not only the immediate ones.

Returns a list of all transaction objects that are either pending, or have been committed in the data source.
That is a wrapper for this.dataSource.allTransactions().

Returns the cell TD element at the specified location.

• x
• Type:number
• The column index.
• y
• Type:number
• The row index.

Gets all igGrid children's elements of the current grid, recursively.

Gets all igGrid children of the current grid, recursively.

Returns a column object by the specified column key.

• key
• Type:string
• The column key.

Returns a column object by the specified header text. If there are multiple matches, returns the first one.

• text
• Type:string
• The column header text.

Commits all pending transactions to the client data source. Note that there won't be anything to commit on the UI, since it is updated instantly. In order to rollback the actual UI, a call to dataBind() is required.

• id
• Type:string
• Optional
• If specified, will commit only that transaction corresponding to the specified index/ key.

Returns the DIV that is the topmost container of the grid widget.

Causes the grid to data bind to the data source (local or remote) , and re-render all of the data as well.

If the data source points to a local JSON array of data, and it is necessary to reset it at runtime, it must be done through this API member instead of the options (options.dataSource).

• dataSource
• Type:object
• New data source object.

Destroy is part of the jQuery UI widget API and does the following:
1. Remove custom CSS classes that were added.
2. Unwrap any wrapping elements such as scrolling divs and other containers.
3. Unbind all events that were bound.

Returns a record by a specified key (requires that primaryKey is set in the settings).
That is a wrapper for this.dataSource.findRecordByKey(key).

• key
• Type:string
• Primary key of the record.

Returns the table that contains the footer cells.

Returns the cell text. If colKey is a number, the index of the column is used (instead of a column name)
This is the actual text (or HTML string) for the contents of the cell.

• rowId
• Type:object
• Row index or row data key (primary key).
• colKey
• Type:string
• Column key.

Retrieves a cell value using the row index and the column key. If a primaryKey is defined, rowId is assumed to be the row Key (not index).
If primary key is not defined, then rowId is converted to a number and is used as a row index.
If colKey is a number, the index of the column is used (instead of a column name).

• rowId
• Type:object
• Row index or row key (primary key).
• colKey
• Type:string
• The column key.

Returns a standalone object (copy) that represents the committed transactions, but detached from the data source.
That is a wrapper for this.dataSource.getDetachedRecord(t).

• t
• Type:object
• A transaction object.

Returns the table that contains the header cells.

Hides a visible column. If the column is hidden the method does nothing.

• column
• Type:object
• An identifier for the column. If a number is provided it will be used as a column index else if a string is provided it will be used as a column key.

Returns the ID of the TABLE element where data records are rendered.

Gets all immediate igGrid children's elements of the current grid.

Gets all immediate igGrid children of the current grid.

Returns a list of all transaction objects that are pending to be committed or rolled back to the data source.
That is a wrapper for this.dataSource.pendingTransactions().

Adds a new row (TR) to the grid, by taking a data row object. Assumes the record will have the primary key.

• rec
• Type:object
• The data row JavaScript object.
• key
• Type:string
• Optional
• Identifier/key of row. If missing, then number of rows in grid is used.

Clears the transaction log (delegates to igDataSource). Note that this does not update the UI. In case the UI must be updated, set the second parameter "updateUI" to true, which will trigger a call to dataBind() to re-render the contents.

• id
• Type:string
• Optional
• If specified, will only rollback the row with that index/key.
• updateUI
• Type:bool
• Optional
• Whether to update the UI or not (will perform a rebind, if true).

Returns the row (TR element) at the specified index. jQuery selectors aren't used for performance reasons.

• i
• Type:number
• The row index.

Returns a list of all TR elements holding data in the grid.

Invokes an AJAX request to the updateUrl option (if specified) and passes the serialized transaction log (a serialized JSON string) as part of the POST request.

Returns the DIV that is used as a scroll container for the grid contents.

Returns the current selected cell if any. Selection must be enabled.

Returns the current array of selected cells if any. Selection must be enabled and multipleSelection must be true.

Returns the current selected row if any. Selection must be enabled.

Returns the current array of selected rows if any. Selection must be enabled and multipleSelection must be true.

Shows a hidden column. If the column is not hidden the method does nothing.

• column
• Type:object
• An identifier for the column. If a number is provided it will be used as a column index. If a string is provided it will be used as a column key.

Returns the total number of records in the underlying backend. If paging or filtering is enabled, this may differ from the number of records in the client-side data source.
In order for this to work, the response JSON/XML must include a property that specifies the total number of records, which name is specified by options.responseTotalRecCountKey.
This functionality is completely delegated to the data source control.

Returns the accumulated transaction log as a string. The purpose of this is to be passed to URLs or used conveniently.
That is a wrapper for this.dataSource.transactionsAsString().

• virtualScrollerY
• Type:object

Returns the element holding the data records.