jQuery Grid Plugin - jqGridForum

Topic RSS

fitToScreen()

25/03/2009
10:27

RaveKev

Member

Members

Forum Posts: 5

Member Since:
17/03/2009

Offline

Hi Tony,

what about a function fitToWindow(width, height) ?

width & height are boolean values.

So fitToWindow(true, false) will widen the grid to the edges of the current window, but the height is the value, you've set with height:'***' in .jGrid(){}

fitToWindow(false, true) will do it vice versa. (Strech to the complete height of the window, but the width is that width you've set with width:'***'.

I think, i don't have to explain, what fitToWindow(true, true) will do

Or if you don't want to use that fitToWindow(width, height) function, you don't have to insert a numeric value in width and height inside .jGrid(){}, but you can input full where you've set for example 'auto' until now.

Bye,

Kevin

(yes, the last-days-bugging-Kevin from germany)

25/03/2009
11:03

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Kevin,

We hve two methods setGridWidth and setGridHeight (if I rememeber right) which can do the same.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/03/2009
05:46

RaveKev

Member

Members

Forum Posts: 5

Member Since:
17/03/2009

Offline

Hi Tony,

that function i've found allready. But when i resize my window, how could i change the width of the grid dynamicly?

I looked into your code to see what i have to change, do enable entering the width in percent..

I think i have never closed a document so fast and frustrated

Best Regards

Kevin

30/03/2009
03:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Kevin,

$(window).resize(function() {

// get here the width of parent container

var parentwidth = some_value

setTimeout(function(){$("#mygrid").setGridWidth(parentwidth)},300);

});

In order to resize the grid when you resize other element in the html page you should be able to have e event when you stop to resize the element and do the same approch as above.

Hope this helps a lot 🙂

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

22/10/2009
14:55

jmav

Member

Members

Forum Posts: 34

Member Since:
16/10/2009

Offline

http://www.trirand.com/blog/?p.....id/#p10996

01/12/2009
17:49

jhsu

Member

Members

Forum Posts: 23

Member Since:
05/11/2009

Offline

Hi Tony,

I've been trying to get jqGrid to resize dynamically with the width of it's container using various methodologies including one detailed above. Unfortunately, none of them work with IE (v6, v7 and v8) properly.

Could I suggest for the next version to add support to set the width option to '100%' and the grid would resize to fit to the width of its container element (i.e. div)?

Thank you so much for all your support and work.

Jack

02/12/2009
09:09

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

What you mean with "none of them work with IE" ?

What is happen?

For IE you maybe you will need not to use innerWidth instead of width

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/12/2009
15:39

jhsu

Member

Members

Forum Posts: 23

Member Since:
05/11/2009

Offline

Hi Tony,

What I meant by not working on IE is because of the strange behaviour of the resize event from IE. It gets triggered several times when the browser window is being resized by the user, so the width of the grid does not get set to a desired value, and it is difficult and error prone to control it.

I did a html profiling from FireBug, and found out that there are a number of div elements in the grid whose width styles are being set at runtime. If i take out the width style, the grid would resize itself to the width of its container. However, this would also break the alignment of the column headers with the data columns in the rows.

What I am proposing is to have the grid support the setting of the width to '100%' or not set at all, and under these conditions, the grid would not statically set the width of the div elements, and this should make it resize properly to its container element. The grid, of course, would need to take care of any column header alignment issues with the rest of the grid.

Thanks again.

Jack

08/12/2009
21:23

linoj

Member

Members

Forum Posts: 18

Member Since:
06/12/2009

Offline

question deleted

[nevermind, i didnt scroll down this topic all the way]

08/12/2009
22:21

linoj

Member

Members

Forum Posts: 18

Member Since:
06/12/2009

Offline

ok, i've found several threads and tried a few different things but could use a real example to get this working. Assuming 3.6+. I want to bind the resize to the browser window resize event, and have the grid width adjust to fit its container. Shouldn't this work?

    $(window).bind('resize', function() {
      $(”#my_grid”).jqGrid('gridResize');
    });

btw, this does work (from http://www.trirand.com/blog/?p.....le%20grid/ )

    $(window).bind('resize', function() {
      if (grid = $('.ui-jqgrid-btable:visible')) {
        grid.each(function(index) {
          gridId = $(this).attr('id');
          gridParentWidth = $('#gbox_' + gridId).parent().width();
          $('#' + gridId).setGridWidth(gridParentWidth);
        });
      };
    });