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.
References

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