Showing posts with label JqGrid. Show all posts
Showing posts with label JqGrid. Show all posts

July 04, 2012

How to create array data grid panel using Jquery JqGrid

How to create grid panel using Jquery JqGrid

JqGrid provides a very easy and flexible way to implement a grid panel in your web page.

Requirement:

  • Jquery JS file
  • Jquery UI JS file
  • Jquery UI css file
  • Jquery multiselect js and css file
  • Jquery jqgrid minimize js file

Follow the below steps for creating a grid panel having array data:

1) Include all the js and css files required (mentioned above) in your page.

2) Add below two lines within your html body tag

<table id="list2" align="center"></table>
<div id="pager2"></div>

3) In your custom JS file add the following code for creating a grid panel.

 

jQuery(document).ready(function($){

jQuery("#list2").jqGrid({ 
 datatype: "local", //json
 height: 250,
 width:400,
 colNames:['Id','First Name', 'Last Name','Email Id'], 
 colModel:[ 
         {name:'id',index:'id', width:55}, 
         {name:'firstName',index:'firstName', width:90},
  {name:'lastName',index:'lastName asc', width:100},
  {name:'emailId',index:'emailId', width:80} 
  ], 
 multiselect: true,
 rowNum:10, 
 rowList:[10,20,30], 
 pager: '#pager2', 
 sortname: 'id', 
 viewrecords: true, 
 sortorder: "asc", 
 caption:"Tasks List" 
}); 
   
var mydata = [                          
{id:"1",firstName:"test",lastName:"note",emailId:"abc222@abc.com"},
{id:"2",firstName:"test2",lastName:"note2",emailId:"abc11@abc.com"}, 
{id:"3",firstName:"test3",lastName:"test3",emailId:"abc43@abc.com"}, 
{id:"4",firstName:"test7",lastName:"test",emailId:"abc12@abc.com"}, 
{id:"5",firstName:"test265",lastName:"test2",emailId:"abc9@abc.com"},
{id:"6",firstName:"test23",lastName:"test3",emailId:"abc1@abc.com"}, 
{id:"7",firstName:"test9",lastName:"test",emailId:"abc6@abc.com"},
{id:"8",firstName:"test8",lastName:"test2",emailId:"abc4@abc.com"},
{id:"9",firstName:"test5",lastName:"test3",emailId:"abc2@abc.com"} 
]; 


for(var i=0;i<=mydata.length;i++) 
 jQuery("#list2").jqGrid('addRowData',i+1,mydata[i]);

});

Hurray, your Grid Panel is ready.

Your grid panel will look like this:
Jquery jqgrid grid panel snapshot
JqGrid Grid Panel