Jqgrid With An Information Panel For Each Column Makes Grid To Show Scroll

We are using jquery grid, the last column of the grid should have link. By clicking the link a new panel should appear which gives more info. So we used a formatter, which generate

Solution 1:

I'm not sure how looks your real code, but the jsfiddle demo isn't good. In any way your main problem: the <div> which you use to show an additional information has <td> element as the parent. It's the main reason of your problem. You should append the div to the body before displaying it to prevent the clipping on the grid.

Additionally I would recommend you

• to use free jqGrid 4.13.4 instead of old jqGrid 4.6
• don't place fix id="sample" in the divs to prevent id duplicate errors
• use beforeSelectRow callback instead of onclick attribute. The beforeSelectRow callback will be called inside of click handler bound to the grid (<table>). It will be called because of event bubbling. The tagret property of the event object gives us full incormation about the clicked element.

The modified demo could be about the following

functionpanelFormatter(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();
        }
    }
});

see http://jsfiddle.net/OlegKi/9a3uaL5h/1/

UPDATED: One can use jQuery Events in the same way like callbacks. For example, one can use the event jqGridBeforeSelectRow instead of beforeSelectRow callback. The code will be

$("#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();
    }
});

See http://jsfiddle.net/9a3uaL5h/2/. By the way one can use jQuery.bind (or better jQuery.on) before the grid is created from the empty <table id="grid"></table>. See http://jsfiddle.net/9a3uaL5h/3/