The actual code you provided is unclear, but the jsfiddle example does not adequately demonstrate it. Regardless, your main issue lies in the fact that the <div> element used to display additional information has a <td> parent element. This is causing the problem. To avoid clipping on the grid, you should append the div to the body before displaying it.
Furthermore, I suggest the following:
- Upgrade to free jqGrid 4.13.4 instead of the outdated jqGrid 4.6
- Avoid using fixed
id="sample" in the divs to prevent duplicate id errors
- Utilize the
beforeSelectRow callback instead of the onclick attribute. This callback will be invoked within the click handler attached to the grid (<table>). The use of event bubbling allows this callback to be triggered, and the tagret property provides comprehensive information about the clicked element.
A revised demo might resemble the following:
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").jqGrid({
...
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();
}
}
});
View it here: http://jsfiddle.net/OlegKi/9a3uaL5h/1/
UPDATE: jQuery Events can be used similarly to callbacks. For instance, replacing the beforeSelectRow callback with the event jqGridBeforeSelectRow can simplify the code:
$("#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();
}
});
Check it out here: http://jsfiddle.net/9a3uaL5h/2/. Additionally, one can utilize jQuery.bind (or preferably jQuery.on) prior to creating the grid from an empty
<table id="grid"></table>
. See:
http://jsfiddle.net/9a3uaL5h/3/