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

Using JQuery Tools for missing UI components in JQuery UI framework

Using JQuery Tools for missing UI components in JQuery UI framework. For this you just need to download JQuery tools js and include it into your website.

Implementation of JQuery Tools is very simple and effective.
For downloading js file please click on following here.

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js">

Lets take a very example of implementing tooltip on a div. Following is the HTML code snippet:

<div id="demo">
 I am in the div
</div>
  
$("#demo").tooltip();