Alex, We could use a little help Column Resizing

Hey Alex, if you get a chance, could you please read through the post titled: Jim Shaffer Please Help
and provide some feedback. I added a comment about this in your beta 2 posting, and would just like to get an answer from you on what you think might be the problem, the best way to fix it, and if it will be addressed by the final release.

The problem I am referring to is resizing a column in the grid, and the rendering problem that occurs if the grid is within an html table tag. The rows in the grid do not resize unless you mouse over each row or scroll up or down

Yes, I can replicate it now. Very frustrating :-(

This has to be fixed for sure.

As a quick fix I would suggest this code:

obj.onColumnWidthChanged = function(){
        this.timeout(function(){
            this.getRowsTemplate().refreshClasses();
        });
    }

Hey Alex,
This is not working form me, but I am not using beta 2, I am using 2.0 beta 1. Is this fix specific to 2.0 beta 2?

just to let you know, it doesn't throw an error, but acts as if the code isn't there. I am aware of caching, and I have deleted all temporary files etc. before testing.

alex any response on this one would be appreciated.

Jim, could you send me (or publish) the code of your page so I can reproduce the problem. I suspect this is somehow related to parent html tables, but in all layouts which I tried - this fix solved the issue.

Alex, not sure if it is same "bug", but seems to be a similar one, here is an example by substitute "AW.UI.List" with AW.UI.Grid in your previous post:
http://activewidgets.com/javascript.forum.8762.2/which-way-to-set-a.html
If you resize a column on a drop-down-combo-grid it is not rendered (until nex time you open a new one). curious :-)

obj.setCellTemplate(new AW.Templates.Combo, 1);

obj.setPopupTemplate(function(col, row){

var grid = this;
var list = new AW.UI.Grid;
list.setId('Myddgrid');
list.setCellText(myData);
list.setHeaderText(myColumns);
list.setRowCount(20);
list.setColumnCount(5);
list.setControlSize(200, 200);
list.onColumnWidthChanged = function(){
this.timeout(function(){
this.getRowsTemplate().refreshClasses();
}); }

list.onCellClicked = function(event, ddcol, ddrow){
var text = this.getCellText(ddcol, ddrow);
grid.setCellText(text, col, row);
grid.setCellValue(text, col, row);
grid.getCellTemplate(col, row).hidePopup();
}

return list;
});
    document.write(obj);

Hey! , I'v notice that in this case when you resize a column, it is resizing the right-most part of the dd-grid ( the column after last data col on the right).
Hope this could give its happening-nature, and sorry for insert this ( If not related same issue)
Thanks

Hey Any More Work Arounds For this problems as I am facing it still

And One More Thing is the data just disappears for some grids when i resize the columns . and comes back if i drag it again ..

The quick fix didn't work for me:

obj.onColumnWidthChanged = function(){
this.timeout(function(){
this.getRowsTemplate().refreshClasses();
});
}


Instead I changed it to:

obj.onColumnWidthChanged = function(){
this.timeout(function(){
this.refresh();
});
}

I don't think this is a very good workaround since it reloaded all my images within the grid but in my case the tables are small. For now the overhead of the workaround is better than leaving the problem.

I hope this will be corrected in a future release.

Has anyone made any progress with this issue. I am still experiencing this with 2.0 final...

Yes, this problem still exists in IE with AW 2.0 final. Sometimes when the grid is inside html <table> tag - the column resizing doesn't work (until hovering the mouse over the rows).

In most cases the workaround is to add style="table-layout:fixed" to the grid parent table (or all parent tables if there are several layers of nested tables).

I'm running into this too (which would be a bit of a showstopper for me, because I'm thinking of using ActiveWidgets to 'enhance' portions of an application -- and I don't control the rest of the page. One of the things I'm supposed to provide is a resizable grid, so turning off the resizing isn't really an option. Even if table-layout:fixed fixes the problem, it has other implications about how the tables (in the page) are layed out, and I'd probably have to do a fair amount of CSS or table tweaking to get the appearance to be as it is now).

I thought of the following, which I tried, and seems like it might work:

1) I downloaded cssQuery from http://dean.edwards.name/my/cssQuery/ (there are other 'return DOM elements which match this css class' libraries, not saying this is the best, just the first I tried).

2) In the middle of
AW.Grid.Controllers.Width={
onColumnWidthChanged:function(width,column){
...
var rules=AW.getRules(ss);

// *** This is the code I added
var elems = cssQuery(selector);
for (var i = 0; i < elems.length; i++) {
elems[i].style.width = w;
}
// *** End of code I added

for(i=0;i<rules.length;i++){
...

So, instead of modifying the style sheet rule, I'm actually directly setting the width of those elements.

Fair warning: I've tried this on exactly one grid. The code above is only necessary for IE, but doesn't seem to harm anything else.