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="grid"></table>

JavaScript

var data = [
  [48803, "DSK1", "", "02200220", "OPEN"],
];

$("#grid").jqGrid({
  datatype: "local",
  colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
  colModel: [{name: 'id',index: 'id', width: 60}, 
  					{ name: 'thingy', index: 'thingy', width: 90}, 
            { name: 'blank', index: 'blank',  width: 30 }, 
            {name: 'number', index: 'number',  width: 80},
            { name: 'status',index: 'status',  width: 80, formatter: panelFormatter
  }],
  caption: "Stack Overflow Example",
});

function panelFormatter(cellvalue, options, rowObject) {
  return '<div id="sample" style="zindex:1000; height: 200px; display:none;position:absolute; background-color:red" > More Info </div> <a onclick=$("#sample").show()>click me</a> ';
}
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
  mydata[i] = {};
  for (var j = 0; j < data[i].length; j++) {
    mydata[i][names[j]] = data[i][j];
  }
}

for (var i = 0; i <= mydata.length; i++) {
  $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}