CODEWITHSUNDEEP
jqgrid
varaprakash
varaprakash

Reputation: 487

fixing column headers while scrolling - jqgrid

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 am using height: 'auto' because I did not want to fix my grid height. Thanks in advance...

Upvotes: 1

Views: 7067

Answers (4)

justaprogrammer
justaprogrammer

Reputation: 73

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!

Upvotes: 0

Zack Marrapese
Zack Marrapese

Reputation: 12080

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

Upvotes: 1

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 2

arb
arb

Reputation: 7863

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.

Upvotes: 0

Related Questions