fixing column headers while scrolling - jqgrid

Question

If my grid data scrolls over the current window, is it possible to freeze the column headers while scrolling the data so that column headers are always visible(like in excel). I

Answer 1

If the grid is top-most element on the page then the usage of position: fixed can be helpful. The code could be about the following

var $hdiv = $($grid[0].grid.hDiv),
    hOffset = $hdiv.offset(),
    $cdiv = $($grid[0].grid.cDiv),
    cOffset = $cdiv.offset(),
    $bdiv = $($grid[0].grid.bDiv);
// change gbox position
$bdiv.parent().parent().css({
    position: "relative",
    top: $bdiv.offset().top,
    left: 0});
// make header and capture fixed
$hdiv.css({
    position: "fixed",
    zIndex: 1,
    top: hOffset.top - cOffset.top,
    left: hOffset.left
});
$cdiv.css({
    position: "fixed",
    zIndex: 1,
    top: 0,
    left: cOffset.left,
    width: $cdiv.width()
});

See the demo.

Answer 2

This work for me (without grid css edit)

document.getElementById("gview_" + gridID).style.height = "100%";
document.getElementById(gridID).parentNode.parentNode.style.height = "100%";
document.getElementById(gridID).parentNode.style.height = "100%";
document.getElementById(gridID).parentNode.style.overflow = "auto";

You have to use this code after grid initialization and you have to call your grid using this id to set the style:

document.getElementById("gbox_" + gridID).style.width = "100%";
document.getElementById("gbox_" + gridID).style.height = "100%";

or

document.getElementById("gbox_" + gridID).style.top = "0px";
document.getElementById("gbox_" + gridID).style.left = "0px";
document.getElementById("gbox_" + gridID).style.bottom = "40px";
document.getElementById("gbox_" + gridID).style.right = "0px";
document.getElementById("gbox_" + gridID).style.position = "absolute";

and columns header are always visible!

hope this help!

Answer 3

This is built into jqgrid. However, in order to use this functionality, you will want to resize the grid itself to fit the window, and then have it resize whenever the window resizes. This will allow scrolling to happen within the grid itself, not within the whole document. See below:

$(window).resize(function () {
  resizeGrid();
});

$(window).load(function() {
  resizeGrid();
});

function resizeGrid() {
  var heightPadding = 200; // or whatever you want it to be
  var widthPadding = 40; // or whatever you want it to be
  $('#grid').setGridHeight($(window).height() - heightPadding);
  $('#grid').setGridWidth($(window).width() - widthPadding);
}

Answer 4

It seems like that should happen automatically according to their documentation and demos. Try setting the height to a pixel value and see what happens.