igGrid Overview

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.


The igGrid control supports a number of different features:

  • Column Resizing
  • Column Hiding
  • Column Summaries
  • Row Selectors
  • GroupBy
  • Tooltips
  • Sorting
  • Filtering
  • Paging
  • Selection
  • Updating
  • jQuery templates
  • Virtual Scrolling

Further, the grid also includes support for:

  • High Performance data manipulation
  • Keyboard Navigation
  • Rich client-side API
  • ASP.NET MVC wrapper

Adding igGrid using the Ignite UI CLI

The easiest way to add a new igGrid to your application is via the Ignite UI CLI.

To install the Ignite UI CLI:

npm install -g igniteui-cli

Once the Ignite UI CLI is installed the commands for generating an Ignite UI project, adding a new igGrid component, building and serving the project are as following:

ig new <project name>
cd <project name>
ig add grid newGrid
ig start

For more information and the list of all available commands read the Using Ignite UI CLI topic.

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 Ignite UI 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 Resources in Ignite UI for jQuery help topic.

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

    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="scripts/infragistics.core.js" type="text/javascript"></script><script src="scripts/infragistics.lob.js" type="text/javascript"></script>
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
  2. Next, reference the JSON array which serves as a data source for the grid is added.

     <!--Sample JSON Data-->
     <script src=""></script>
  3. Define a table DOM element, that igGrid will use to render the given data.

    In HTML:

     <div style="height:300px;">
         <table id="grid"></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. HTML tags should be avoided, as they might cause misbehavior in some features.
      • 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 () {
              autoGenerateColumns: false,
              renderCheckboxes: true,
              primaryKey: "EmployeeID",
              columns: [{
                  // note: if primaryKey is set and data in primary column contains numbers,
                  // then the dataType: "number" is required, otherwise, dataSource may misbehave
                  headerText: "Employee ID", key: "EmployeeID", dataType: "number"
                  headerText: "First Name", key: "FirstName", dataType: "string"
                  headerText: "Last Name", key: "LastName", dataType: "string"
                  headerText: "Title", key: "Title", dataType: "string"
                  headerText: "Birth Date", key: "BirthDate", dataType: "date"
                  headerText: "Postal Code", key: "PostalCode", dataType: "string"
                  headerText: "Country", key: "Country", dataType: "string"
              dataSource: northwind,
              dataSourceType: "json",
              responseDataKey: "results",
              height: "100%",
              width: "100%",
              tabIndex: 1,
              features: [
                      name: "Selection",
                      mode: "row",
                      multipleSelection: true
                      name: "Paging",
                      pageSize: 5
                      name: "Filtering"
  5. Run the web page. The igGrid binds to the JSON array and displays the data.

  6. Working sample

Related Content


View on GitHub