Grid table width to adapt browser size

[noctrona]

Hi,

I want to know is that possible can let grid table adapt the browser width automatically.

It means when I minimize or change my browser size, I hope the grid table can change automatically. So I only need to use the scroll bar on the grid bottom, and don't need to move the scroll bar on the browser bottom.



Thank you!

[paramvir]

Currrently v2.0.4 supports width in %age, but that works only the first time when the grid is created. It can't resize itself upon window resize.

2.0.5 would support fully fluid tables.

[paramvir]

Hi noctrona

The latest version supports fluid widths (% and 'auto')

Example:

http://paramquery.com/pro/demos/fluid_window

[noctrona]

Hi noctrona

The latest version supports fluid widths (% and 'auto')

Example:

http://paramquery.com/pro/demos/fluid_window

Got it.
I have download the 2.1.0 version and replace old version in my page. I check the demo, so I only need to set width: "auto", nothing need to change?

I try it, then I change my browser size, but the gird width didn't change automatically.

[paramvir]

What is the width or display css property of grid's parent element?

The point is grid ancestors also need to be fluid. Example: http://paramquery.com/pro/demos/fluid_window

[noctrona]

What is the width or display css property of grid's parent element?

The point is grid ancestors also need to be fluid. Example: http://paramquery.com/pro/demos/fluid_window

I got your mean. But I haven't achieved this new feature with my code. My current developed on Salesforce.com platform. There are some Salesforce packaged tags in my page. But the basic structure is similar as our general html page.

And I use another way to let my grid auto suit the browser width, but when I change to new paramquery version, this way can't work well.
Please have a look with my code:
About the grid attribution:

Code: [Select]

var obj = {
                // other attributions...
                width: $(window).width()-50
}

And the js code:

Code: [Select]

    var currentHeight;
    var currentWidth;
   
    $(window).resize(function () {
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
   
        if (currentHeight == undefined || currentHeight != windowHeight
           || currentWidth == undefined || currentWidth != windowWidth) {

            currentHeight = windowHeight;
            currentWidth = windowWidth;
   
            //resize param grid with
            $("#grid_json").pqGrid("option", "width", windowWidth-50);
            //$("#grid_json").pqGrid("option", "width", 500);
        }
    });
By this code, I can reset the grid width when I change browser width in old version. But with "paramquery-2.1.0", it doesn't work.

Do you know why this happened? Whether I use a wrong way to set the grid width?


Thank you!

[paramvir]

you could refresh the grid upon setting of width.

 $("#grid_json").pqGrid("option", "width", windowWidth-50);
 $("#grid_json").pqGrid("refresh");

or

Alternative Easier ways:

1)
var obj = {
                // other attributions...
                width: 'auto'
}

along with 25px margin on both sides
<div id="grid_json" style="margin:auto 25px;"></div>

or

2)
var obj = {
                // other attributions...
                width: '100%-52'
}

[noctrona]

you could refresh the grid upon setting of width.

 $("#grid_json").pqGrid("option", "width", windowWidth-50);
 $("#grid_json").pqGrid("refresh");

or

Alternative Easier ways:

1)
var obj = {
                // other attributions...
                width: 'auto'
}

along with 25px margin on both sides
<div id="grid_json" style="margin:auto 25px;"></div>

or

2)
var obj = {
                // other attributions...
                width: '100%-52'
}

Hi,

I add this in my js function, and it can work well.

Thanks for your help.