Max columns limitation in grid?

[jarrod]

Not quite certain yet, but it does seem that there is a max number of columns that can be rendered with correct contents, i.e. 10 columns?

It seems that values in columns 11 onwards are not rendered although the grid columns are rendered correctly - getValueAt() works fine too.

[jack.slocum]

I've never heard of that. Can you give an example?

[seno]

Sorry for my poor english express
if columns count more than 21, last column content is rendered in first column.

var myData = [
   ['3m Co',71.72,0.02,0.03,'9/1 12:00am','3m Co',71.72,0.02,0.03,'9/1 12:00am','3m Co',71.72,0.02,0.03,'9/1 12:00am','3m Co',71.72,0.02,0.03,'9/1 12:00am','3m Co',71.72]];

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
			{header: "Company", width: 200, sortable: true, sortType: sort.asUCString}, 
			{header: "Price", width: 75, sortable: true, renderer: money}, 
			{header: "Change", width: 75, sortable: true, renderer: change}, 
			{header: "% Change", width: 75, sortable: true, renderer: pctChange}, 
			{header: "Last Updated", width: 85, sortable: true, renderer: italic},
			{header: "Company", width: 200, sortable: true, sortType: sort.asUCString}, 
			{header: "Price", width: 75, sortable: true, renderer: money}, 
			{header: "Change", width: 75, sortable: true, renderer: change}, 
			{header: "% Change", width: 75, sortable: true, renderer: pctChange}, 
			{header: "Last Updated", width: 85, sortable: true, renderer: italic},
			{header: "Company", width: 200, sortable: true, sortType: sort.asUCString}, 
			{header: "Price", width: 75, sortable: true, renderer: money}, 
			{header: "Change", width: 75, sortable: true, renderer: change}, 
			{header: "% Change", width: 75, sortable: true, renderer: pctChange}, 
			{header: "Last Updated", width: 85, sortable: true, renderer: italic},
			{header: "Company", width: 200, sortable: true, sortType: sort.asUCString}, 
			{header: "Price", width: 75, sortable: true, renderer: money}, 
			{header: "Change", width: 75, sortable: true, renderer: change}, 
			{header: "% Change", width: 75, sortable: true, renderer: pctChange}, 
			{header: "Last Updated", width: 85, sortable: true, renderer: italic},
			{header: "Company", width: 200, sortable: true, sortType: sort.asUCString}, 
			{header: "Price", width: 75, sortable: true, renderer: money}
		]);

[tryanDLS]

That's a CSS issue. There are only 20 cols defined in the CSS for a grid. There are numerous posts regarding this. Basically you need to add additional entries to the grid.css for your extra columns. You need to add as many of these as you have extra columns

.ygrid-col-21 {}
.ygrid-header-21 {}

[Animal]

You need more .ygrid-col-n style rules for columns 21 upwards. There are only the first 20 provided.

Do a search for "multi-grid" in the forums for more about this.

[jbowman]

for cases where you're just adding creating blank css classes for the columns, maybe the grid could be retrofitted to add them into the head of the document based on the columnmodel, rather than having just a limit of 20 columsn predefined in the css included. Something like

YAHOO.ext.grid.GridView.prototype.renderRow = function(dataModel, row, rowIndex, colCount, renderers, dindexes){
        for(var colIndex = 0; colIndex < colCount; colIndex++){
// BEGIN CHANGES
       var newStyle = document.createElement('style');
      newStyle.setAttribute("type","text/css");
      var styleText = '.ygrid-col-' + colIndex + '{} .ygrid-header-' + colIndex + '{}';;
      if (newStyle.styleSheet) {
         newStyle.styleSheet.cssText = styleText;
      } else {
         var newStyleContent = document.createTextNode(styleText);
         newStyle.appendChild(newStyleContent);
      } 
// END CHANGES
            var td = document.createElement('span');
            td.className = 'ygrid-col ygrid-col-' + colIndex + (colIndex == colCount-1 ? ' ygrid-col-last' : '');
            td.columnIndex = colIndex;
            td.tabIndex = 0;
            var span = document.createElement('span');
            span.className = 'ygrid-cell-text';
            td.appendChild(span);
            var val = renderers[colIndex](dataModel.getValueAt(rowIndex, dindexes[colIndex]), rowIndex, colIndex);
            if(typeof val == 'undefined' || val === '') val = ' ';
            span.innerHTML = val;
            row.appendChild(td);
        }
//BEGIN CHANGES
    document.getElementsByTagName("head")[0].appendChild(newStyle);
//END CHANGES
    },

Note: Wrote the changes in the textbox and haven't tested or actually run this code.

edit: oops, helps if I adjust the style from what I used for the logger :oops:

[Animal]

There is a solution to this which jack and I have been corresponding on. I contributed a class which encapsulates the capabilities of the StyleSheet object in a cross-browser manner, enabling you to add modify, and enquire upon rules indexed by CSS selectors.

It should make it into a future release of the Grid. In the meantime, the code is on this thread: http://www.yui-ext.com/forum/viewtopic.php?t=1038

[jack.slocum]

I will try to get this change into the next release. Animal if you hear me talking about a release in a day or two and you don't see it in svn, beat me in the head ok?

[Animal]

:lol:

No way! You need to take care of your brain!

[DJ123]

i need to show @150 columns on one page
does editable grid support such number of columns?
i also would like to know maximum number of columns and rows that can be
shown on one page with the help of editable grids