Click here to Skip to main content
14,877,943 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I need to adjust the grid height based on scrreen height.if screen resolution changes the grid height also need to change.It should work as fluid height
Posted
Comments
johnysamuel 5-Apr-12 1:13am
   
@ryanb31 Hi it helpped me to set the grid height same as that of screen resolution height for the first time, but when iI change the resolution grid height is not changing

Using jQuery you can do something like
JavaScript
 function setGridHeight() {
            try {
                var ht;
                ht= $(window).height();
// maybe need to subtract out other elements.  do your own logic here.
                $("#gridId").height(ht);
            }
            catch (e)
            { }
        }
   
Comments
johnysamuel 10-Apr-12 1:18am
   
Hi it helpped me to set the grid height same as that of screen resolution height for the first time, but when iI change the resolution grid height is not changing
ZurdoDev 10-Apr-12 7:54am
   
In the document.ready function you can wire up the window.resize event.

$(document).ready(function () {
$(window).resize(function () {
setGridHeight();
});
});
johnysamuel 10-Apr-12 9:02am
   
yes ryan, I have used the same, the grid height is not resizing when the browser height varies...rather grid starts disappearing
ZurdoDev 10-Apr-12 9:07am
   
I don't follow what you are saying, but you will also want to call your function to set the height when the document is ready.
johnysamuel 11-Apr-12 0:58am
   
If the browser height is 650px, the grid height should be 650 and if it is reduced to 500px, it should be of 500px. I used like this
$(document).ready(function () {
var ht=window.innerHeight;
$('#gridID').jqGrid('setGridHeight',ht);
$(window).resize(function () {
var ht=window.innerHeight;
$('#gridID').jqGrid('setGridHeight',ht);
});
});
the above code is not working as mentioned.I tried to set height in jquery.jgrid.src.js as
if(this.p.autoHeight){
var $height=$(eg).innerHeight();
ts.p.heigth=$height;
}

and in jsp file I coded as

jQuery.extend(jQuery.jgrid.defaults, {
autoHeight:true });

this also is not working..
ZurdoDev 11-Apr-12 9:40am
   
What does not working mean? Just put some breakpoints in there and figure out what is happening. I have not used jqGrid before so I am not sure how that will behave or if it has a different method for setting the height.
JavaScript
//Javascript
$(document).ready(function () {
var widthValue = $(window).width();
$("#JQGridID").jqGrid({
width: widthValue,
loadError: function (xml) { alert('Unable to load result data.'); }
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900