Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

ui.igGrid

ui.igGrid_image

The igGrid control is a jQuery grid that includes user interaction features like filtering, grouping, column hiding and resizing, paging, row and cell selection, sorting, summaries, tooltips, and data editing capabilities.

Note: The igGrid is a stand-alone control as well as the base for the igHierarchicalGrid control. Each API that applies to igGrid also applies to the igHierarchicalGrid control.

The following code snippet demonstrates how to initialize the igGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

Code Sample

  
        <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
            <link href="themes/base/ig.ui.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->
            <script src="js/jquery.tmpl.js" type="text/javascript"></script>
            <!-- Infragistics Combined Scripts -->
            <script src="js/ig.ui.js" type="text/javascript"></script>
	        <script type="text/javascript">
		        var products = [
			        { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
			        { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
			        { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
			        { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
			        { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
			        { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
			        { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
			        { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
			        { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
	           ];

		       $(function () {
			       $("#grid").igGrid({
				       columns: [
				           { headerText: "Product ID", key: "ProductID", dataType: "number" },
					       { headerText: "Product Name", key: "Name", dataType: "string" },
					       { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
				       ],
				       width: "500px",
				       dataSource: products
			       });
		       });
	        </script>
        </head>
        <body>
	        <div id="grid"></div>
        </body>
        </html>
      

Related Samples

Related Topics

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
ig.datasource.js
ig.ui.shared.js
ig.util.js
  • accessibilityRendering

    Type:
    bool
    Default:
    false

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                accessibilityRendering : true
            });
          
  • adjustVirtualHeights

    Type:
    enumeration
    Default:
    false

    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.

    Members

    • true
    • Type:bool
    • no matter what avg row height is set, one will be automatically calculated at runtime.
    • false
    • Type:bool

    Code Sample

            
            //Initialize
            $(".selector").igGrid({
                adjustVirtualHeights : true
            });
    
            //Get
            var virtualHeights = $(".selector").igGrid("option", "adjustVirtualHeights");
            
  • alternateRowStyles

    Type:
    bool
    Default:
    true

    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.

    Code Sample

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

    Type:
    bool
    Default:
    true

    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.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                autoAdjustHeight : true
            });
    
            //Get
            var adjustHeight = $(".selector").igGrid("option", "autoAdjustHeight");
            
  • autoCommit

    Type:
    bool
    Default:
    false

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                autoCommit : true
            });
    
            //Get
            var commit = $(".selector").igGrid("option", "autoCommit");
          
  • autofitLastColumn

    Type:
    bool
    Default:
    true

    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.

    Code Sample

      
    	    //Initialize
    	    $(".selector").igGrid({
    		    autofitLastColumn : true
    	    });
    	 
    	    //Get
    	    var autoFit = $(".selector").igGrid("option", "autofitLastColumn");
          
  • autoFormat

    Type:
    enumeration
    Default:
    date

    Sets gets ability to automatically format text in cells for numeric and date columns. The format patterns and rules for numbers and dates are defined in $.ig.regional.defaults object.

    Members

    • dateandnumber
    • Type:string
    • true
    • Type:bool
    • formats Date and number columns.
    • false
    • Type:bool
    • auto formatting is disabled.
    • date
    • formats only Date columns.
    • number
    • formats only number columns.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                autoFormat : "string"
            });
    
            //Get
            var autoFormat = $(".selector").igGrid("option", "autoFormat");
            
  • autoGenerateColumns

    Type:
    bool
    Default:
    true

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                autoGenerateColumns : false
            });
    
            //Get
            var autoCols = $(".selector").igGrid("option", "autoGenerateColumns");
            
  • avgColumnWidth

    Type:
    enumeration
    Default:
    null

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

    Members

      • string
      • The avarage column width can be set in pixels (25px).
      • number
      • The avarage column width can be set as a number (25).

    Code Sample

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

    Type:
    enumeration
    Default:
    25

    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 .

    Members

      • string
      • The avarage row height can be set in pixels (25px).
      • number
      • The avarage row height can be set as a number (25).

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                avgRowHeight : 25
            });
    
            //Get
            var height = $(".selector").igGrid("option", "avgRowHeight");
         
  • caption

    Type:
    string
    Default:
    null

    Caption text that will be shown above the grid header.

    Code Sample

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

    Type:
    array
    Default:
    []
    Elements Type:
    object

    An array of column objects.

    Code Sample

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

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

    Type:
    bool
    Default:
    false

    Option to enable virtualization for columns only (horizontal).

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                columnVirtualization : true
            });
    
            //Get
            var columnVirtualization = $(".selector").igGrid("option", "columnVirtualization");
            
  • dataSource

    Type:
    object
    Default:
    null

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                dataSource : ds
            });
    
            //Get
            var ds = $(".selector").igGrid("option", "dataSource");
            
            //Set
            $(".selector").igGrid("option", "dataSource", ds);
         
  • dataSourceType

    Type:
    string
    Default:
    null

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                dataSourceType : "xml"
            });
    
            //Get
            var dsType = $(".selector").igGrid("option", "dataSourceType");
        
  • dataSourceUrl

    Type:
    string
    Default:
    null

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                dataSourceUrl : urlString
            });
    
            //Get
            var urlString = $(".selector").igGrid("option", "dataSourceUrl");
            
  • defaultColumnWidth

    Type:
    enumeration
    Default:
    null

    Default column width that will be set for all columns.

    Members

      • string
      • The default column width can be set in pixels (px).
      • number
      • The default column width can be set as a number.

    Code Sample

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

    Type:
    object
    Default:
    []

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

    Code Sample

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

    Type:
    bool
    Default:
    true

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

    Code Sample

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

    Type:
    bool
    Default:
    true

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

    Code Sample

             
            //Initialize
            $(".selector").igGrid({
                fixedHeaders : false
            });
    
            //Get
            var fixedHeaders = $(".selector").igGrid("option", "fixedHeaders");
         
  • height

    Type:
    enumeration
    Default:
    null

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

    Members

    • null
    • Type:object
    • will stretch vertically to fit data, if no other heights are defined.
    • string
    • The widget height can be set in pixels (px) and percentage (%).
    • number
    • The widget height can be set as a number.

    Code Sample

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

    Type:
    bool
    Default:
    false

    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.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                jQueryTemplating : true
            });
    
            //Get
            var templating = $(".selector").igGrid("option", "jQueryTemplating");
         
  • localSchemaTransform

    Type:
    bool
    Default:
    true

    If this option is set to false, the data to which the grid is bound will be used "as is" with no additional transformations based on columns defined.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                localSchemaTransform : false
            });
    
            //Get
            var schemaTransform = $(".selector").igGrid("option", "localSchemaTransform");
          
  • primaryKey

    Type:
    string
    Default:
    null

    Primary key name of the column containing unique identifiers.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                primaryKey : "CustomerID"
            });
    
            //Get
            var key = $(".selector").igGrid("option", "primaryKey");
       
  • requiresDataBinding

    Type:
    bool
    Default:
    true

    This is an internal option and should not be used.

  • responseDataKey

    Type:
    string
    Default:
    null

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                responseDataKey : "records"
            });
    
            //Get
            var responseKey = $(".selector").igGrid("option", "responseDataKey");
          
  • responseTotalRecCountKey

    Type:
    string
    Default:
    null

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                responseTotalRecCountKey : "totalRecords"
            });
    
            //Get
            var recordsCount = $(".selector").igGrid("option", "responseTotalRecCountKey");
          
  • rowTemplate

    Type:
    string
    Default:
    null

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

    Code Sample

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

    Type:
    bool
    Default:
    false

    Option to enable virtualization for rows only (vertical).

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                rowVirtualization : true
            });
    
            //Get
            var virtualization = $(".selector").igGrid("option", "rowVirtualization");
        
  • serializeTransactionLog

    Type:
    bool
    Default:
    true

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                serializeTransactionLog : false
            });
    
            //Get
            var log = $(".selector").igGrid("option", "serializeTransactionLog");
        
  • showFooter

    Type:
    bool
    Default:
    true

    Option controlling the visibility of the grid footer.

    Code Sample

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

    Type:
    bool
    Default:
    true

    Option controlling the visibility of the grid header.

    Code Sample

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

    Type:
    number
    Default:
    0

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

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                tabIndex : 3
            });
    
            //Get
            var tabIndex = $(".selector").igGrid("option", "tabIndex");
            
  • updateUrl

    Type:
    string
    Default:
    null

    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.

    Code Sample

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

    Type:
    bool
    Default:
    false

    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.

    Code Sample

     
            //Initialize
            $(".selector").igGrid({
                virtualization : true
            });
    
            //Get
            var virtualization = $(".selector").igGrid("option", "virtualization");
    
          
  • virtualizationMouseWheelStep

    Type:
    number
    Default:
    null

    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.

    Code Sample

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

    Type:
    enumeration
    Default:
    null

    Members

    • null
    • Type:object
    • will stretch to fit data, if no other widths are defined.
    • string
    • The widget width can be set in pixels (px) and percentage (%).
    • number
    • The widget width can be set as a number.

    Code Sample

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

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

Show Details
  • cellClick

    Cancellable:
    false

    Event fired when a cell is clicked.
    Function takes arguments evt and ui.
    Use ui.cellElement to get reference to cell DOM element.
    Use ui.rowIndex to get row index.
    Use ui.colIndex to get column index.
    Use ui.owner to get reference to igGrid.

    Code Sample

     
    		//Delegate
    		$(document).delegate(".selector", "iggridcellclick", function (evt, ui) {
    			//return cell html element in the DOM
    			ui.cellElement;
    			//return row index
    			ui.rowIndex;
    			//return row key
    			ui.rowKey;
    			//return col index
    			ui.colIndex;
    			//return col key
    			ui.colKey;
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			cellClick: function(evt, ui) {...}
    		});
          
  • columnsCollectionModified

    Cancellable:
    false

    Event fired after the columns colection has been modified(e.g. a column is hidden)
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggridcolumnscollectionmodified", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			columnsCollectionModified: function(evt, ui) {...}
    		});
          
  • dataBinding

    Cancellable:
    true

    Event fired before data binding takes place.
    Return false in order to cancel data binding.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggriddatabinding", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			dataBinding: function(evt, ui) {...}
    		});
          
  • dataBound

    Cancellable:
    false

    Event fired after data binding is complete.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggriddatabound", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			dataBound: function(evt, ui) {...}
    		});
          
  • dataRendered

    Cancellable:
    false

    Event fired after all of the data records in the grid table body have been rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggriddatarendered", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			dataRendered: function(evt, ui) {...}
    		});
          
  • dataRendering

    Cancellable:
    true

    Event fired before the TBODY holding the data records starts its rendering.
    Return false in order to cancel data records rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggriddatarendering", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    			//return grid's table body DOM element
    			ui.tbody;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			dataRendering: function(evt, ui) {...}
    		});
          
  • footerRendered

    Cancellable:
    false

    Event fired after the footer has been rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.table to get reference to footers table DOM element.

    Code Sample

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

    Cancellable:
    true

    Event fired before the footer starts its rendering.
    Return false in order to cancel footer rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

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

    Cancellable:
    false

    Event fired after every TH in the grid header has been rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.columnKey to get column key.
    Use ui.th to get reference to header cell DOM element.

    Code Sample

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

    Cancellable:
    false

    Event fired after the header has been rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.table to get reference to headers table DOM element.

    Code Sample

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

    Cancellable:
    true

    Event fired before the header starts its rendering.
    Return false in order to cancel header rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

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

    Cancellable:
    false

    Event fired after the whole grid widget has been rendered (including headers, footers, etc.).
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

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

    Cancellable:
    true

    Event fired before the grid starts rendering (all contents).
    Return false in order to cancel grid rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggridrendering", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			rendering: function(evt, ui) {...}
    		});
          
  • requestError

    Cancellable:
    false

    Event fired if there is an error in the request, when the grid is doing a remote operation,
    such as data binding, paging, sorting, etc.
    use ui.owner to get a reference to the grid
    use ui.message to get the error message coming from the server.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", 'iggridrequesterror', function (evt, ui) {
    			//return reference to igGrid
    			ui.owner
    			//return error message coming from the server
    			ui.message
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			requestError: function(evt, ui) {...}
    		});
          
  • rowsRendered

    Cancellable:
    false

    Event fired after data rows are rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.tbody to get reference to grid's table body.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggridrowsrendered", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    			//return grid's table body DOM element
    			ui.tbody;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			rowsRendered: function(evt, ui) {...}
    		});
          
  • rowsRendering

    Cancellable:
    true

    Event fired before actual data rows (TRs) are rendered.
    Return false in order to cancel rows rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.tbody to get reference to grid's table body.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggridrowsrendering", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    			//return grid's table body
    			ui.tbody;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			rowsRendering: function(evt, ui) {...}
    		});
          
  • schemaGenerated

    Cancellable:
    false

    Event fired after $.ig.DataSource schema has been generated, in case it needs to be modified.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGrid.
    Use ui.schema to get reference to data source schema.
    Use ui.dataSource to get reference to data source.

    Code Sample

      
    		//Delegate
    		$(document).delegate(".selector", "iggridschemagenerated", function (evt, ui) {
    			//return reference to igGrid
    			ui.owner;
    			//return data source schema
    			ui.schema;
    			//return reference to data source
    			ui.dataSource;
    		});
    		
    		//Initialize
    		$(".selector").igGrid({
    			schemaGenerated: function(evt, ui) {...}
    		});
          
  • activeCell

    .igGrid( "activeCell" );
    Return Type:
    object

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

    Code Sample

     
            var cell = $(".selector").igGrid("activeCell");
          
  • activeRow

    .igGrid( "activeRow" );
    Return Type:
    object

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

    Code Sample

     
            var row = $(".selector").igGrid("activeRow");
         
  • allRows

    .igGrid( "allRows" );
    Return Type:
    array

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

    Code Sample

      
          var rows = $(".selector").igGrid("allRows");
          
  • allTransactions

    .igGrid( "allTransactions" );
    Return Type:
    array

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

    Code Sample

      
          var transactions = $(".selector").igGrid("allTransactions");
          
  • cellAt

    .igGrid( "cellAt", x:number, y:number );
    Return Type:
    domelement

    Returns the cell TD element at the specified location.

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

    Code Sample

     
          var cell = $(".selector").igGrid("cellAt", 3, 4);
          
  • children

    .igGrid( "children" );
    Return Type:
    array

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

    Code Sample

      
          var allChildren = $(".selector").igGrid("children");
          
  • childrenWidgets

    .igGrid( "childrenWidgets" );
    Return Type:
    array

    Gets all igGrid children of the current grid, recursively.

    Code Sample

      
          var allChildrenWidgets = $(".selector").igGrid("childrenWidgets");
          
  • columnByKey

    .igGrid( "columnByKey", key:string );
    Return Type:
    object

    Returns a column object by the specified column key.

    • key
    • Type:string
    • The column key.

    Code Sample

     
          var col = $(".selector").igGrid("columnsByKey", "ProductName");
          
  • columnByText

    .igGrid( "columnByText", text:string );
    Return Type:
    object

    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.

    Code Sample

     
                  var col = $(".selector").igGrid("columnByText", "Product Name");
          
  • commit

    .igGrid( "commit", [id:string] );

    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.

    Code Sample

     
          $(".selector").igGrid("commit");
          
  • container

    .igGrid( "container" );
    Return Type:
    domelement

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

    Code Sample

     
          var containerDiv = $(".selector").igGrid("container");
          
  • dataBind

    .igGrid( "dataBind" );

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

    Code Sample

     
          $(".selector").igGrid("dataBind");
          
  • dataSourceObject

    .igGrid( "dataSourceObject", dataSource:object );

    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.

    Code Sample

     
          $(".selector").igGrid("dataSourceObject", jsonData);
          
  • destroy

    .igGrid( "destroy" );

    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.

    Code Sample

     
          $(".selector").igGrid("destroy");
          
  • findRecordByKey

    .igGrid( "findRecordByKey", key:string );
    Return Type:
    object

    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.

    Code Sample

      
          var record = $(".selector").igGrid("findRecordByKey", "AR-5381");
          
  • footersTable

    .igGrid( "footersTable" );
    Return Type:
    domelement

    Returns the table that contains the footer cells.

    Code Sample

      
          var footer = $(".selector").igGrid("footersTable");
          
  • getCellText

    .igGrid( "getCellText", rowId:object, colKey:string );
    Return Type:
    string

    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.

    Code Sample

     
            var text = $(".selector").igGrid("getCellText", 3, "ProductName");
          
  • getCellValue

    .igGrid( "getCellValue", rowId:object, colKey:string );
    Return Type:
    object

    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.

    Code Sample

      
          var date = $(".selector").igGrid("getCellValue", 3, "ShipDate");
          
  • getDetachedRecord

    .igGrid( "getDetachedRecord", t:object );
    Return Type:
    object

    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.

    Code Sample

      
            var ds = $(".selector").igGrid("option", "dataSource");
            var transactionObject = ds.addRow(123, {
                  Name: "CD Player",
                  Price: "40",
                  Rating: "4"
                 }, true);
            var record = $(".selector").igGrid("getDetachedRecord", transactionObject);
          
  • headersTable

    .igGrid( "headersTable" );
    Return Type:
    domelement

    Returns the table that contains the header cells.

    Code Sample

     
            var headers = $(".selector").igGrid("headersTable");      
  • hideColumn

    .igGrid( "hideColumn", column:object );

    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.

    Code Sample

      
            $(".selector").igGrid("hideColumn", 1);
            $(".selector").igGrid("hideColumn", "ProductID");
          
  • id

    .igGrid( "id" );
    Return Type:
    string

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

    Code Sample

     
            var id = $(".selector").igGrid("id");
          
  • immediateChildren

    .igGrid( "immediateChildren" );
    Return Type:
    array

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

    Code Sample

      
            var children = $(".selector").igGrid("immediateChildren");
          
  • immediateChildrenWidgets

    .igGrid( "immediateChildrenWidgets" );
    Return Type:
    array

    Gets all immediate igGrid children of the current grid.

    Code Sample

      
            var childrenWidgets = $(".selector").igGrid("immediateChildrenWidgets");
          
  • pendingTransactions

    .igGrid( "pendingTransactions" );
    Return Type:
    array

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

    Code Sample

      
            var pendingTrans = $(".selector").igGrid("pendingTransactions");
          
  • renderNewRow

    .igGrid( "renderNewRow", rec:object );

    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.

    Code Sample

      
            $(".selector").igGrid("renderNewRow", {
                          ProductID: 2,
    			          Name: "CD Player",
    			          ProductNumber: "test",
    			          Color: "test",
                          StandardCost: 40,
                         });
          
  • rollback

    .igGrid( "rollback", [id:string], [updateUI:bool] );

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

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

    Code Sample

     
          $(".selector").igGrid("rollback", 5, true);
          
  • rowAt

    .igGrid( "rowAt", i:number );
    Return Type:
    domelement

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

    • i
    • Type:number
    • The row index.

    Code Sample

     
          var row = $(".selector").igGrid("rowAt", 5);
          
  • rows

    .igGrid( "rows" );
    Return Type:
    array

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

    Code Sample

     
          var rows = $(".selector").igGrid("rows");
          
  • saveChanges

    .igGrid( "saveChanges" );

    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.

    Code Sample

     
          $(".selector").igGrid("saveChanges");
          
  • scrollContainer

    .igGrid( "scrollContainer" );
    Return Type:
    domelement

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

    Code Sample

     
          var container = $(".selector").igGrid("scrollContainer");
          
          
  • selectedCell

    .igGrid( "selectedCell" );
    Return Type:
    object

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

    Code Sample

     
          var cell = $(".selector").igGrid("selectedCell");
          
  • selectedCells

    .igGrid( "selectedCells" );
    Return Type:
    array

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

    Code Sample

     
          var cells = $(".selector").igGrid("selectedCells");
          
  • selectedRow

    .igGrid( "selectedRow" );
    Return Type:
    object

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

    Code Sample

     
          var row = $(".selector").igGrid("selectedRow");
          
  • selectedRows

    .igGrid( "selectedRows" );
    Return Type:
    array

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

    Code Sample

     
          var rows = $(".selector").igGrid("selectedRows");
          
  • showColumn

    .igGrid( "showColumn", column:object );

    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.

    Code Sample

      
            $(".selector").igGrid("showColumn", 1);
            $(".selector").igGrid("showColumn", "ProductID");
          
  • totalRecordsCount

    .igGrid( "totalRecordsCount" );
    Return Type:
    number

    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.

    Code Sample

     
            var count = $(".selector").igGrid("totalRecordsCount");      
          
  • transactionsAsString

    .igGrid( "transactionsAsString" );
    Return Type:
    string

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

    Code Sample

      
            var transactionsString = $(".selector").igGrid("transactionsAsString");
          
  • widget

    .igGrid( "widget" );

    Returns the element holding the data records.

    Code Sample

     
          var grid = $(".selector").igGrid("widget");
          
  • ui-widget ui-helper-clearfix ui-corner-all

    Classes applied to the top container element.
  • ui-widget-content

    Widget content class applied to various content containers in the grid.
  • ui-widget-header

    JQuery UI class applied to the grid header elements.
  • ui-iggrid-deletedrecord

    Classes applied to the deleted rows of grid before commit.
  • ui-iggrid-captiontable

    When no headers are shown or fixed headers is false, the caption (if any) needs to be rendered in a separate table.
  • ui-iggrid

    Class applied to the top container element.
  • ui-iggrid-footercaption

    Classes applied to the grid footer caption contents.
  • ui-iggrid-footertable ui-widget-footer

    When fixed footers is enabled, this class is applied to the table that holds the footer TD elements.
  • ui-iggrid-headercaption ui-widget-header ui-corner-top

    Classes applied to the element that's on top of the header that has some description.
  • ui-iggrid-headertable

    When fixed headers is enabled, this class is applied to the table that holds the header TH elements.
  • ui-iggrid-scrolldiv ui-widget-content

    Classes applied to the scrolling div container when width and height are defined and scrollbars is 'true'.
  • ui-iggrid-tablebody

    Class applied to the TABLE's TBODY holding data records.
  • ui-iggrid-table ui-widget-content

    Classes applied to the TABLE which holds the grid records.
  • ui-iggrid-header ui-widget-header

    Classes applied to the grid header elements.
  • ui-iggrid-headertext

    Classes applied to the header text container.
  • ui-iggrid-modifiedrecord

    Classes applied to the modified rows of grid before commit.
  • ui-ig-altrecord ui-iggrid-altrecord

    Classes applied on alternate records.
  • ui-ig-record ui-iggrid-record

    Classes applied to the TBODY, and inherited through css for the records.