working jqGrid Example

by Oleg Kiriljuk

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,
    beforeSelectRow: function (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();
        }
    }
});

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>';
}