autosize problem

[byuva]

I've tried:

grid.autoSizeColumns=true;

before grid.render() and

grid.getView().autoSizeColumns();

It seems to generally work but the columns are significantly wider than they need to be. When I double click on the column dividers, they size correctly/tightly on the column data.

Is this expected or am I doing something wrong?

-b

[jack.slocum]

grid.autoSizeColumns = true only works when your data is array data and not async loaded.

To auto size columns after loading data, you have to manually trigger it (assumes grid and dm are your grid and data model):


dm.addListener('load', function(){
grid.getView().autoSizeColumns();
});


t seems to generally work but the columns are significantly wider than they need to be. When I double click on the column dividers, they size correctly/tightly on the column data.

They both use the same code, so if the results aren't the same then something is wrong.

The auto sizing measures the width of the content in the column, so if you call it before an data is present, there's nothing to measure and the results won't be what you are looking for. That's why we hook the load event above and do it after, because then we know the data is there.

If you are calling it after the data is loaded and still get undesirable results, then you have probably found a bug. Let me know if this is the case.

Jack

[Animal]

If the columns are wider than they need to be, this is because the View adjusts the calculated width to fill the available area instead of leaving unallocated width.

This code in autoSizeColumns does that:


if(colModel.getTotalWidth() < wrap.clientWidth){
var diff = Math.floor((wrap.clientWidth - colModel.getTotalWidth()) / colCount);
for(var i = 0; i < colCount; i++){
colModel.setColumnWidth(i, colModel.getColumnWidth(i) + diff, true);
}
}

[jack.slocum]

Good point Animal. I forgot about that. If the auto sizing renders the columns smaller than the grid's viewport, it corrects the sizes so the columns fill the viewport.

[byuva]

I am using XML so I tried hooking the load event on the data model as Jack suggested. It doesn't seem to be firing though as the results are the same with and without it (too small columns).

With the other two techniques (described in my earlier post) the columns are too big. I get a horizontal scrollbars so it doesn't seem to be an issue of filling the space (when I double click on all the dividers the columns shrink and the scrollbar disappears).

-b

[jack.slocum]

Can you post some code or even better a page?

[mbecke]

Did anyone find a solution for this one? I'm running into the same issue, but only in IE. It seems that the resize fires before the content is finished rendering, thereby causing some sizing issues. You can fix it by manually calling autoResizeColumns() or running it after some fixed delay. Neither of these options are terribly attractive though. Any thoughts? My code is below:

Thank you.


var Projects = function(){
var grid, dm, cm;
return {
init : function(){
cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Title"}
, {header: "Address"}
, {header: "Cost"}
, {header: "Units"}
, {header: "Updated"}
, {header: "Phase"}
, {header: "Distance"}
]);
cm.defaultSortable = true;

dm = new YAHOO.ext.grid.XMLDataModel({
tagName: 'Project',
totalTag: 'Count',
id: 'id',
fields: [
'title'
, 'address'
, 'value'
, 'units'
, 'updatedDate'
, 'stage'
, 'distance'
]
});

dm.initPaging("project.xml", 10);
dm.setDefaultSort(cm, 3, 'DESC');

grid = new YAHOO.ext.grid.Grid('projects-grid', dm, cm);
grid.render();

dm.addListener('load', function(){
grid.getView().autoSizeColumns();
});

dm.loadPage(1);//, function() { Projects.resize(); });
},
resize : function () {
grid.view.autoSizeColumns();
}
};
}();

YAHOO.util.Event.addListener(window, 'load', Projects.init);

[ojintoad]

I have definitely noticed the resize firing early. I'm not running the beta quite yet so I don't know if it is fixed.

I used the Microsoft Script Editors debugging features to figure out one issue.

In grid VIEW's render we have this code

this.bwrap.setWidth(colModel.getTotalWidth());
bwrap.rows = bwrap.childNodes;

this.footerHeight = 0;

I highlight these three lines specifically because setWidth fires off a chain of events where one of the called functions eventually looks for a footerHeight that doesn't exist yet.

The calls look like...

Element.setWidth calls Element.fireResized();
this.fireResized() fires direct the onResized Event
Gridview.onWindowResize looks like its subscribing to that event
GridView.onWindowResize calls this.updateWrapHeight
this.updateWrapHeight executes this line of code here

this.wrapEl.setHeight(box.height-this.footerHeight-parseInt(this.wrap.offsetTop, 10));

Lookin at all the variables, this.footerHeight contains NaN.

This is a hard bug to spot unless you're looking at runtime values.

[jack.slocum]

That setWidth doesn't actually (directly) cause any events to trigger. All it does is set the CSS width of the particular element. The internal onResized event, in fact, has been removed in the later releases. (which, by the way, netted a monster performance boost).

That NaN value should be fixed in this latest release. Much of this code has been made safer for use with display none.

[Choleriker]

I have the effect that autoSizeColumns() on view doesnt make it if i call it in the load event of the dataModel, but that works for me:


_dModel.on('load', function() {
this.getView().autoSizeColumns.defer(200, this.getView());
}, grid, true);