jQuery Grid Plugin - jqGridForum

Topic RSS

Cell and Header auto sizing?

28/01/2009
17:02

kspeakman

Member

Members

Forum Posts: 9

Member Since:
29/01/2009

Offline

Hello,

I'm looking for a way to make the jqGrid be sized based on it's contents (the default behavior of an HTML table) rather than have to pre-set a size (or pre-set column widths). Is this possible with jqGrid?

I've tried using jQuery to set the table-layout to auto and set the width of sub-elements to auto as follows:

$("#gridContainer [style*='width:']").width("auto");
$("#gridContainer table").css("table-layout", "auto");

(gridContainer is a div that's a parent of the jqGrid)

But this has not produced the desired results.

Also, I notice the drag handle takes up space and is capable of clipping the header text and the sort image even if column resizing is turned off on all columns. I would very much like to prevent that, too.

Any suggestions would be appreciated. Thanks,

Kasey

29/01/2009
06:24

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Currently this is not possible.

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.

29/01/2009
07:41

kspeakman

Member

Members

Forum Posts: 9

Member Since:
29/01/2009

Offline

tony said:

Hello,

Currently this is not possible.

Regards

Tony

Hi,

Thanks for the response.

Any plans to support this? If you are the least bit interested in doing this, I can work on some HTML/CSS that works both ways — static and auto sizing. (After I finish my project.)

Any help on the drag handle issue? Resizing is nice, but for my project I don't need resizing as much as I don't need each column header to take up an extra 8 or 10 pixels.

And by the way, thanks for creating jqGrid.

Kasey

30/01/2009
09:27

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Every help is welcome.

Thank you

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.

09/02/2009
11:19

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

Hello,

I am also very interested in the cell auto size feature. I have a "comments" column with lots of contents. It will be great if the cell can be sized based on it's contents like that of html table cell. Any plans to support this soon?

Thanks! Maggie

10/02/2009
23:36

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I'm not sure that this can be implemented easy. This is due the concept of jqGrid. Basically jqGrid uses the CSS property table-layout : fixed. There is another layout - table-layout: auto which do what you ask. Moreover when we have this, resizing columns will be a very hard job.

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.

11/02/2009
10:35

kspeakman

Member

Members

Forum Posts: 9

Member Since:
29/01/2009

Offline

I experimented with using table-layout: auto, but the way the HTML is designed, the header and pager can't be resized with the grid. As Tony said, there is also a lot of CSS and inline style that are meant for fixed-width columns that you have to combat to try auto sizing.

It's going to take an HTML/CSS redesign to be able to do either auto or fixed. As far as HTML, the main point would be to wrap the header, grid, and pager in a table element. That would make the header and pager automatically size up to the grid size (since it's a div element), provided the width styling is left off those elements. Tables are annoying to work with, but are still the most straightforward way to do that.

The auto-sized grid could disable the drag handles and resizing in the first iteration. However, there could be a case for doing resizing on an auto-sized table. This could be accomplished by using the .offsetHeight and .offsetWidth javascript properties. These properties apparently work in all modern browsers. I tested them to work on at least DIV and TD elements in Chrome, Firefox 3, and IE 7.

I think there is some combination of HTML that could be used both ways, for auto and fixed sizing. The fixed sizing should just require extra CSS.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)