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 mydata = [
    {id:48803, thingy: "DSK1", blank: "", number:"02200220", status:"OPEN"}
];

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

function panelFormatter(cellvalue, options, rowObject) {
    return '<div name="sample" style="z-index:2000; height: 200px; display:none;position:absolute; background-color:red"> More Info </div> <a>click me</a>';
}

$("#grid").bind("jqGridBeforeSelectRow", function (event, rowid, e) {
    var $td = $(e.target).closest("tr.jqgrow>td"),
        colName = $td.length < 0 ?
        null :
    $(this).jqGrid("getGridParam").colModel[$td[0].cellIndex].name;
    if (colName === "status" && e.target.tagName.toLowerCase() === "a") {
        // <a> in the "status" column is clicked
        $td.find("div[name=sample]")
            .appendTo("body")
            .position({
            of: $td,
            at: "left bottom",
            my: "left bottom+" + $td.height()
        })
            .show();
    }
});