working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="list2" />
<div id="jQGridDemoPager"></div>

CSS

.ui-jqgrid .ui-state-highlight { background: silver; }

JavaScript

var $j = jQuery.noConflict(true);
$j(function () {
	var mydata = [
		{ "UserName": "8125579231", "RoleId": 1, "Name": "John", "RoleName": "Administrator" },
		{ "UserName": "9676078986", "RoleId": 1, "Name": "Mia", "RoleName": "Administrator" },
		{ "UserName": "9703804807", "RoleId": 1, "Name": "Shan", "RoleName": "Administrator" },
		{ "UserName": "9177458358", "RoleId": 1, "Name": "Tim", "RoleName": "Administrator" },
		{ "UserName": "7760699118", "RoleId": 2, "Name": "Harry", "RoleName": "Sales" }
	];

	$j('#list2').jqGrid({
		caption: "Employee Details",
		data: mydata,
		datatype: "local",
		colNames: ["RoleName", "UserName", "RoleId", "Name"],
		colModel: [
    	{ name: "RoleName" },
			{ name: "UserName" },
			{ name: "RoleId" },
			{ name: "Name" }
		],
		rowNum: 10,
		gridview: true,
		autoencode: true,
		height: "auto",
		pager: '#jQGridDemoPager',
		sortname: "UserName",
		viewrecords: true,
		sortorder: "desc",
    grouping: true,
		groupingView: {
			groupField: ["RoleName"],
			groupColumnShow: [true],
			hideFirstGroupCol: [true],
			groupText: ["<b>{0}</b>"],
			groupOrder: ["asc"],
			groupSummary: [false],
			groupCollapse: false
		},
    ondblClickRow: function clickView(){
						var gr = $j('#list2').jqGrid('getGridParam','selrow');
						$j('#list2').jqGrid('viewGridRow',gr,{
							top:50,
							left:50,
							width:400,
							reloadAfterSubmit:false,
							viewPagerButtons:false,
							closeAfterEdit : true
						});
					}
	});

	
});