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:

JqGrid Grid Panel