Injecting GridView's into the Grid? (Also a faster GridView)

[kalebwalton]

UPDATE: After I posted this I saw the following post which covers the same problem and may have a better solution: http://www.jackslocum.com/forum/viewtopic.php?t=424

First off, great job on the library Jack - I agree with everyone's glowing opinions :).

The question
I created a FastGridView by extending the GridView and optimizing a few methods for speed. The problem I came across was that there was no obvious way to set the GridView to use for rendering of a Grid. Is there any way to do so?


The catalyst

I was testing the performance of the GridView with various amounts of data and realized that the rendering of the DefaultGridView is somewhat slow after 500 or so records and completely croaks at 10000 records. I decided to look into the insertRows() and renderRow() methods to see if I could speed it up a bit.

In Firefox I sped it up by a factor of about 2x by creating a String of the necessary span tags rather than building up the actual nodes. The following code cuts the render time in half:


YAHOO.ext.grid.FastGridView = function()
{
YAHOO.ext.grid.FastGridView.superclass.constructor.call(this);
};
YAHOO.extendX(YAHOO.ext.grid.FastGridView, YAHOO.ext.grid.GridView);
YAHOO.ext.grid.FastGridView.prototype.renderRow = function(dataModel, row, rowIndex, colCount, renderers, dindexes)
{
var td = "";
for (var colIndex = 0; colIndex < colCount; colIndex++)
{
td += '<span><span>';
var val = renderers[colIndex](dataModel.getValueAt(rowIndex, dindexes[colIndex]), rowIndex, colIndex);
if (typeof val == 'undefined' || val === '')val = '';
td += val;
td += '</span></span>';
}
return td;
};
YAHOO.ext.grid.FastGridView.prototype.insertRows = function(dataModel, firstRow, lastRow)
{
timer.start("preparing");
this.updateBodyHeight();
this.adjustForScroll(true);
var renderers = this.getColumnRenderers();
var dindexes = this.getDataIndexes();
var colCount = this.grid.colModel.getColumnCount();
var beforeRow = null;
var bt = this.getBodyTable();
if (firstRow < bt.childNodes.length)
{
beforeRow = bt.childNodes[firstRow];
}
timer.stop("preparing");
timer.start("looping");
var rows = "";
for (var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++)
{
rows += '<span>';
rows += this.renderRow(dataModel, rows, rowIndex, colCount, renderers, dindexes);
rows += '</span>';
}
bt.innerHTML = rows;
timer.stop("looping");
timer.start("indexes");
this.updateRowIndexes(firstRow);
timer.stop("indexes");
this.adjustForScroll();
};
[/code]

[jack.slocum]

The problem with the building an HTML string is the grid depends on the columnIndex expando in various spots. Setting the columnIndex in the HTML gets different results in different browsers and is totally ignored in strcit mode.

The FastGridView you noted in the other posted is a great solution although I haven't have a chance to do any testing with it.

To set the GridView, you can set the view property (MUST be set before rendering like everything else).

grid.view = new FastGridView();
grid.render();

[kalebwalton]

Excellent! Thank you - I'll remember that.

[moazzamAlii]

how to use this code

[tryanDLS]

This thread is a year old and refers to code that's several generations old and no longer supported. My thought would be that is no longer applicable to the current codebase - the grid rendering engine has improved significantly since then.