adjust grid height based on screen resolution

Question

0.00/5 (No votes)

See more:

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 3-Apr-12 21:44pm

johnysamuel

Add a Solution

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

2 solutions

Add a Solution

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

Dhanamanikandan · Answer 1 · 2012-05-29T20:57:00

Solution 2

JavaScript

//Javascript
$(document).ready(function () {
var widthValue = $(window).width();
$("#JQGridID").jqGrid({
width: widthValue,
loadError: function (xml) { alert('Unable to load result data.'); }
});

Posted 29-May-12 20:57pm

Dhanamanikandan

ZurdoDev · Answer 2 · 2012-04-04T02:10:00

Solution 1

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

Posted 4-Apr-12 2:10am

ZurdoDev

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.

adjust grid height based on screen resolution

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

adjust grid height based on screen resolution

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us