jqgrid with an information panel for each column makes grid to show scroll

Question

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 generates a hidden div and link. The problem is that for last rows, the information panel makes the grid to have the scroll bar.

Correct

Incorrect

I made a very simple test at http://jsfiddle.net/9a3uaL5h/. as you see clicking the click me will make the grid to scroll.

The formatter is as:

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

How can I fix that the panel be displayed on to of grid without scroll bar?

Answer 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

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

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/