grid lazy row rendering implemented

[ericwaldheim]

So here's my effort to speed up grid row rendering.

I added the following listener after grid.render:

mygrid.addListener('bodyscroll', mygrid.view.lazyRender, mygrid.view, true);

I slightly modified GridView insertRows:

YAHOO.ext.grid.GridView.prototype.insertRows
= function(dataModel, firstRow, lastRow)
{
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];
}
if (!this.rendered) { this.rendered = []; } // Added this, (move to ctor)
for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
var row = document.createElement('span');
row.className = 'ygrid-row';
row.style.top = (rowIndex * this.rowHeight) + 'px';
// replace this line:
// this.renderRow(dataModel, row, rowIndex, colCount, renderers, dindexes);
// with this placeholder line:
this.rendered[rowIndex] = false; // mark row as unrendered
if(beforeRow){
bt.insertBefore(row, beforeRow);
}else{
bt.appendChild(row);
}
}
this.updateRowIndexes(firstRow);
this.adjustForScroll();
this.lazyRender(); // and finally, render visible rows
};


Then I added one function:


YAHOO.ext.grid.GridView.prototype.lazyRender = function()
{
var y = this.wrap.scrollTop;
var rowHeight = this.getRowHeight();
var rowIndex = (y == 0 ? 0 : Math.floor(y / rowHeight));
var grid = this.grid;
var dataModel = grid.getDataModel();
var rowCount = dataModel.getRowCount();
if (rowIndex >= rowCount ){ return; }
var numDisplayedRows = Math.ceil(this.wrap.clientHeight / rowHeight);
var lastRowIndex = Math.min(rowCount - 1, rowIndex + numDisplayedRows);

var colCount = grid.colModel.getColumnCount();
var renderers = this.getColumnRenderers();
var dindexes = this.getDataIndexes();
while (rowIndex <= lastRowIndex)
{
if (!this.rendered[rowIndex])
{
var row = grid.getRow(rowIndex);
this.renderRow(dataModel, row, rowIndex, colCount, renderers, dindexes);
this.rendered[rowIndex] = true;
}
++rowIndex;
}
}


Seems to work like a champ.
thanks,
Eric

(Jack, the degree to which your code is well-written and thus easy to hack is absolutely astounding.)

[jack.slocum]

Thanks. I will try it out, it looks great!

[gurusingh]

Can you please give the full code