1

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...

2
  • I am not sure that I understand your question. The default behavior of jqGrid already so: only the body with the data will be scrolled, but the column headers stay visible. Could you explain the problem more exactly. A picture could be also helpful.
    – Oleg
    Mar 13, 2012 at 18:33
  • I have added the images. Basically I would like to have dynamic height but when I get window scroll bars, third pic shows that headers are not visible while scrolling. Is it possible to fix column headers? Mar 13, 2012 at 18:43

4 Answers 4

2

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.

2
  • What if the grid is in the center of the page? How can i handle that??
    – A Coder
    Dec 17, 2014 at 10:25
  • @SanthoshKumar: You can just define outer div where you places <table> which you use to create the grid. If you center the outer div, for example using <div style="display: table; margin: 0 auto;"> then the grid will be horizontally centered on the page too.
    – Oleg
    Dec 17, 2014 at 10:37
1

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

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.

2
  • Zero21xxx: Thanks for the response, I guess it would work with fixed height but as I mentioned I did not want to fix my grid height as the grid height could change based on data populated in the grid... Mar 13, 2012 at 15:29
  • You could set a min-height and a max-height if you wanted to keep the height between two values. If you don't want to set any height then your options for achieving this become almost impossible without a lot of custom jqGrid code I'm sorry to say.
    – arb
    Mar 13, 2012 at 15:35
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.