Bind JSON Data Using igGrid

In this article we are going to learn about a fastest jQuery data grid i.e, igGrid which can be used to bind different types of data sources such as JSON, xml, HTML tables and collections in .NET

 

Features

• editing
• sorting
• column resizing
• filtering
• paging.

Let's start with a simple demo with binding of JSON data to the igGrid.

Add some dependencies of Ignite UI css and js files.

 

Add html element to show igGrid

<table id="grid"></table>

Jquery snippet to igGrid binding of JSON data.

$(function () {
           var data = [
                     { "Name": "iShriss", "Age": 25 },
                     { "Name": "Bill", "Age": 59 },
                     { "Name": "Tim", "Age": 54 },
                     { "Name": "Sam", "Age": 36 },
                     { "Name": "Mark", "Age": 27 },
               ];
           $("#grid").igGrid({
              columns: [
           { headerText: "Name", key: "Name", dataType: "string" },
           { headerText: "Age", key: "Age", dataType: "number" },
           ],
               width:'250px',  //column resizing
               dataSource: data //JSON Array
           });
       });

CSS

<style>
       #grid_container {
           width: 100%;
           max-width: 560px;
       }
   </style>

On executing, here you have a beautiful ui.igGrid.

 

 

Closure 

 

In this article I have shown the basic (introductory) feature of ui.igGrid in which we bind JSON data. I liked the UI in this grid.

 

References

http://www.igniteui.com/
http://www.infragistics.com/