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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

ZurdoDev · Answer 1 · 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.

Dhanamanikandan · Answer 2 · 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