jqGrid Fluid height layout & Pagination based on screen resolution

Question

0.00/5 (No votes)

See more:

Hi,

If a jqGrid contains total 40 records, I'm giving pagination as 10 records in a page. So total 4 pages. It'll show 1 - 10 of 40 in 1st page then 11 - 20 of 40 in second page and so on upto 4th page. My screen resolution is 1366 X 768. So when I load the same grid to some more high resolution screen, I need to get fluid layout in height. Otherwise the grid will occupy the same space as in low resolution screen and there will be much white space left between grid and footer. At the same time pagination should change dynamically like one page may contains more records (say 20). Then 1st page should show 1 - 20 of 40 and 2nd page 21 - 40 of 40. I'm using Fluid layout in width. How can I achieve Fluid layout in height and do pagination as i mentioned above?

Regards ,

Vincent

Posted 10-Apr-12 20:40pm

Vincent Ghomus

Updated 10-Apr-12 20:59pm

v2

Add a Solution

1 solution

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)

TorstenH. · Answer 1 · 2012-04-10T20:55:00

you need to define the height (and width) of your GUI relative.
That's done by using percent values or - if not available - by using calculations which do the trick for you:

Java

{
	...
	setColumns(1000);
}


private void setColumns(final int tableWidth) {// avoiding scroll bar - keep it at 99%
	oTableCol1.setWidth((int) (0.20 * tableWidth));
	oTableCol2.setWidth((int) (0.11 * tableWidth));
	oTableCol3.setWidth((int) (0.18 * tableWidth));
	oTableCol4.setWidth((int) (0.10 * tableWidth));
	oTableCol5.setWidth((int) (0.10 * tableWidth));
	oTableCol6.setWidth((int) (0.10 * tableWidth));
	oTableCol7.setWidth((int) (0.15 * tableWidth));
	oTableCol8.setWidth((int) (0.05 * tableWidth));
}

That is one of my tables. It calculates according to the given value the width of the table columns. I give it a width of 1000 in this - which could also be read from the displayed resolution and be different on each system.

The number of entries in the table is

heightOfTable / heightOfOneEntry

whereas heightOfTable is defined by the display resolution....