Start Building Professional
Web Apps Today

Header overflow with auto-width

In one of our grids, we use the following header structure:

<column type="ro" width="0">Hidden</column>
<column type="reviewStatus" width="18" align="left"></column>
<column type="ch" width="16" align="left"></column>
<column type="tree" width="*">Tree</column>
<column type="ro" width="130" align="right" sort="_dateSort">Date</column>

The first column is set to "hidden".
The above works as expected initially. However, there are times when the "Tree" column data will expand beyond the boundaries of the column and be truncated. When we attempt to expand the column width, the following occurs:
1) The grid is located in an sub-frame (an iFrame, really.) When the cursor moves off the edge of the containing window, the resize of the column ends. As the "date" column is quite small, there's not much room to expand the field. In looking at the code, it seems as though:
a) The "onmousemove" event is linked to the grid itself. Which means that as soon as the mouse leaves the grid boundaries, the column resize stops. Ideally this event would be linked to the "top.document" object in order to prevent this.
b) The "onmouseup" is linked to the current document, which orphans the functionality when the mouse leaves the current document's area. We solved that by adding "top..." to the code.

2) After expanding the grid successfully, the column "snaps back" to its auto-width size. This makes it impossible (via this setup) to view the full contents of the column.

One possible solution we thought of was to use the "enableColumnAutoSize" and "adjustColumnSize" functions. When we tried that, we set the width of the date column to be "*" and then used the "adjust" function on the tree column. This would have suited our needs, but it seems like the "adjust" function has issues with "tree" type columns. The width of the field was always too small after the adjustment call - it seemed to set the width of the field based on the tree and icon images only and ignored the actual row text in its calculation.

What we require is:
- A grid which uses 100% of the available page width.
- The containing page can be resized, so the columns must adjust itself either dynamically or else as a result of a function call.
- The first column should be hidden. The next two columns should be sized as above at all times. The "date" column should always display the full contents of all rows (the "adjust" function above works perfectly for this column.)
- No part of the values in the "tree" column should ever be hidden, even when this means that a horizontal scrollbar is present.

Code samples are available upon request. Thanks!

>>Ideally this event would be linked to the "top.document" object in order to prevent this.
While it possible to link event to document.body , so it will allow wider resize possibility, usage of such event in multi-frame environment is problematic

>> After expanding the grid successfully, the column "snaps back" to its auto-width size.
This is functionality of auto-size column, it always adjust self to show possible width, you can resolve it by adding next code
Behavior can be changed by adding next code
    mygrid.attachEvent("onResize",function(col,size){
        mygrid.initCellWidth[col]=size;
        return true;
    })

>>The width of the field was always too small after the adjustment call - it seemed to set the width of the field based on the tree and icon images only and ignored the actual row text in its calculation.
Real width calculations works only in IE, any other browsers can't calculate necessary width correctly, so width calculated based on text content length