Infragistics(R) NetAdvantage(R) jQuery
igGrid Overview
E-mail your feedback on this topic.

Glossary Item Box

About igGrid

The igGrid is a jQuery-based client-side grid that is responsible for presenting and manipulating tabular data. Its whole lifecycle is on the client-side, which makes it independent from server-side technology.

 

Features

The igGrid control supports a number of different features:

Further, the grid also includes support for:

Adding igGrid to a Web Page

The following steps demonstrate how to create a basic implementation of the jQuery Grid on a web page using either jQuery client code. To read about which implementation to choose, see NetAdvantage for jQuery Overview.

igGrid Overview Sample

To get started, include the required and localized resources for your application. Details on which resources to include can be found in the Using JavaScript Resouces in NetAdvantage for jQuery help topic.

  1. On your HTML page, reference the required JavaScript and CSS files.

    In HTML:

    <script src="scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="scripts/ig.ui.js" type="text/javascript"></script>
    <link href="themes/base/ig.ui.css" rel="stylesheet" type="text/css" />
    <link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
    
    
  2. Next, create a JSON array which serves as a data source for the grid.

    In Javascript:

    var products = [];
    products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" };
    products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" };
    products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" };
    products[3] = { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" };
    products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" };
    products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" };
    products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" };
    products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" };
    products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" };
    products[8] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" };
    
    
  3. Define a table DOM element, that igGrid will use to render the given data.

    In HTML:

    <table id=”grid1></table>
    
    
  4. Once the above setup is complete, begin to set options including ID, columns and datasource.
    1. columns – the column object definition for igGrid
      • headerText – the text in the header of a column
      • key – the name of the key field in the data source
      • dataType – the data type of a column. Could be “string”, “number” or “date”
    2. dataSource – the data that the igGrid is displaying data for. Options include:
      • JSON object
      • JavaScript array
      • XML
      • Remote data
      • Table DOM element

    In Javascript:

    $(function () {
        $("#grid1").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
        });
    });
    
  5. Run the web page. The igGrid binds to the JSON array and displays the data.

Related Links