Post
Ask Question

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
  1. <table id="grid"></table>  
Jquery snippet to igGrid binding of JSON data.
  1. $(function () {  
  2.            var data = [  
  3.                      { "Name": "iShriss", "Age": 25 },  
  4.                      { "Name": "Bill", "Age": 59 },  
  5.                      { "Name": "Tim", "Age": 54 },  
  6.                      { "Name": "Sam", "Age": 36 },  
  7.                      { "Name": "Mark", "Age": 27 },  
  8.                ];  
  9.            $("#grid").igGrid({  
  10.               columns: [  
  11.            { headerText: "Name", key: "Name", dataType: "string" },  
  12.            { headerText: "Age", key: "Age", dataType: "number" },              
  13.            ],  
  14.                width:'250px',  //column resizing  
  15.                dataSource: data //JSON Array   
  16.            });  
  17.        });  
CSS
  1. <style>  
  2.        #grid_container {  
  3.            width: 100%;  
  4.            max-width: 560px;  
  5.        }  
  6.    </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.
 


Similar Articles