PDA

View Full Version : Max columns limitation in grid?



jarrod
28 Nov 2006, 4:20 AM
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
28 Nov 2006, 5:07 AM
I've never heard of that. Can you give an example?

seno
28 Nov 2006, 9:09 AM
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
28 Nov 2006, 9:25 AM
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
28 Nov 2006, 9:27 AM
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
28 Nov 2006, 11:47 AM
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
28 Nov 2006, 1:10 PM
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
28 Nov 2006, 4:29 PM
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
29 Nov 2006, 12:06 AM
:lol:

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

DJ123
26 Jun 2010, 4:52 AM
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