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();

How to show rounder shape corners in browser

How to show rounder shape corners in browsers(IE6, IE7, IE8 , IE9, FF) :

This tutorial will help you to make rounded corners using jquery. It works in every browser:

For this you have to include jquery.corner.js.with jquery min js.

After that you just have to write:

 $('id or class name').corner();

Disable backspace keyboard event for browser back button only

The following is the code to disable backspace keyboard event for browser back button only. Code works fine for IE, FF, Chrome

jQuery(document).unbind('keypress'); //for other
jQuery(document).unbind('keydown'); // for IE
jQuery(document).keypress(function (e) {
	//alert(e.target.nodeName.toUpperCase());
    if ( e.target.nodeName.toUpperCase() != 'INPUT' && 
			e.target.nodeName.toUpperCase() != 'TEXTAREA') {			
			  var code = (e.keyCode ? e.keyCode : e.which);							
			  if ( code == 8 ) return false;
	 }		
});

jQuery(document).keydown(function (e) {
	//alert(e.target.nodeName.toUpperCase());
	if ( e.target.nodeName.toUpperCase() != 'INPUT' && 
			e.target.nodeName.toUpperCase() != 'TEXTAREA') {			
				var code = (e.keyCode ? e.keyCode : e.which);							
				if ( code == 8 ) return false;
	}		
});