Auto width columns

Thanks for that. I'll let you know how it goes.

Right now, I'm having problems with the DWR RPC system which I'm going to be using in the DataModel to incrementally get data from the server.

[Rasmus]

If maxRowsToMeasure is larger than the number of rows in the data set, it becomes unhappy.

[jack.slocum]

Thanks for reporting that. It's fixed. The version used on this site has the fix if you can't wait for the next release.

http://www.jackslocum.com/build/yui-ext.js

[Animal]

It's not that good that the page author has to have all the classes ygrid-col-n defined in a CSS file, or, if you are going to be having multiple grids, #parent-id ygrid-col-n

I will have to support multiple grids - each grid will be clickable to edit an entity in a form on another tab, and each entity may have inputs which require a grid to be created in a YAHOO.widget.Dialog (whch will again be a two tab affair with a Grid, and a form - allowing editing of the entity in any clicked row).

So I may have an arbitrary number of grids all dislpaying different data in the same page.

Each Grid instance should create its own new stylesheet and rules when it first interrogates the ColumnModel.

I think the email in which I sent you my Stylesheet API bounced. I can send it again if you like.

[jack.slocum]

That would be good. Please send it. Does it work in Safari? What license does it have and can I put it in the YAHOO.ext.util package so it is part of the standard dist? If it bounces again, try jvs308@yahoo.com.

I don't think having to define columns as in #my-grid .ygrid-col-0 would be much of a problem since you have to anyway if you want to set alignment or style the column. I guess if I was creating a bunch of pages with multiple grids I would think differently though. ;)

[Animal]

OK that's sent. I don't know if it works on Safari - I've tested it on Opera 8, FF 1.5 and IE 7.

I might write my own extension of your Grid which creates a CSSStylesheet object using my API with the specific style rules for that instance.

Would that work? How does your Grid access pre-existing rules to change them? I guess it must load all the styesheets, and scan the rules in each one until it finds selector texts which match.

[jack.slocum]

Yes, it caches the rules in a hash by selector on the first pass. It searches for #your-grid-id .ygrid-col-n first and if it doesn't find it it uses the global .ygrid-col-n

Creating a custom ColumnModel that creates the rules might be a good solution for now. I just don't want to break anything and right now the CSS code works in IE, FF, Opera, Safari and variants. I will do some testing of the code as soon as I get this release out. It should be a feature for the next version though.

[Animal]

I'm noticing that it takes a very long time to render the gtrid if a have a lot of columns, and it overflows the available width.

I only have 2 rows, but 22 columns.

When it autosizes, it seems to then want to also go back and try to squeeze the columns to fit into the available size.

I don't want this - I want true autosizing - just make the gride wider. As it is, it juuust can't fit it all in, and it overflows by about 75px.

When it does this, it also gets the header and data column widths out of sync. Even if I double-click on all the resizers to auto size. Every data column ends up 1px wider than the header, so by the end of the line it's quire seriously skewed.

[jack.slocum]

That 1 px prob is gone in the new version. It was a result of using two separate layouts for headers and columns. The headers floated and the columns where display:inline-block/table-cell elements. In the new version they are all block and positioned.

I know you have a custom ColumnModel... did you add the suppressEvent functionality present on the DefaultColumnModel.setColumnWidth? This is critical to the performance of auto column width.

This is what's in DefaultColumnModel:


YAHOO.ext.grid.DefaultColumnModel.prototype.setColumnWidth =
function(col, width, suppressEvent){
this.config[col].width = width;
this.totalWidth = null;
if(!suppressEvent){
this.onWidthChange.fireDirect(this, col, width);
}
};


If that's not there IE will go nuts doing layout on every change and it can take up to 4-5 seconds just to measure and layout the columns (with 5 columns, not 22, lol).

Ok, I just tested auto sizing with the new layout for the first time. It was actually broken. With 5 or less columns and 50 rows, the performance was fantastic - almost instantaneous. With 20 columns and 50 rows it was so bad it's not usable. With 20 columns and 10 rows, it was reasonable, probably around 500 milliseconds. The bottleneck is not the JS code, its the browser rendering engine moving and resizing all the elements when I change the css rule. So the less elements to move, the faster it is.

Personally, I don't use auto sizing columns. I have a default width for each column, then when the user resizes a column, I store that value and restore it the next time they load the grid. Are you not planning on storing the users sizes?

[Animal]

Thanks for that.

Yes, I probably will store the column sizes.

I'll probably store column selection, order, and size against a key of URL and user name.

[hammond]

Are there any current functions that would allow one to use icons in the header and data columns?

Your work is great, thanks so much

[jack.slocum]

You can put whatever you want in header. For data columns, you would use a renderer function to add the image or you could use a CSS background image. If you do a search, there are a couple posts on this.

[hammond]

-- I tried it like this but it does not render the image if possible what would the way to define the path to the image.

{header: "../images/replay_icon.gif",

Thanks

[jack.slocum]

header: 'foo.gif'