Your example is not indicative of the issue. The below code (modified from the unlimited columns demo) shows the issue more clearly.
Run this code and then scroll to the right. As you get to column 11 row 8 will automatically expand in height then scroll more to column 20 and you will see row 4 expand in height. Now if you scroll down from there so that row 8 is visible you will see row 8 shrinks because column 11 is no longer in view.
With a small amount of multiple line rows this is not too bad, but when you have multiple columns in which many of the rows have different height data, this becomes very annoying as column heights continually jump around as you scroll.
$(function () {
var rowsNum = 100,
colsNum = 10002,
data = [];
for (var i = 0; i < rowsNum; i++) {
var row = [];
for (var j = 0; j < colsNum; j++) {
if( i == 7 && j == 11)
{
row[j] = 'This is very long text that will wrap. You can see that the row height jumps as you horizontally scroll to this cell.';
}
else if( i == 4 && j == 20)
{
row[j] = 'This is very long text that will wrap. You can see that the row height jumps as you horizontally scroll to this cell.';
}
else
row[j] = Math.round(Math.random() * 10000);
}
data[i] = row;
}
// header
var colModel = [],
headerCol = {};
for (var i = 0, j = 0; j < colsNum; i++, j++) {
headerCol = {
title: "Test col " + j,
collapsible: {},
//width: 240,
align: "center"
}
headerCol.colModel = [{
title: "SubCol " + j++,
width: 120,
align: "center"
}, {
title: "SubCol " + j++,
width: 120,
align: "center"
}, {
title: "SubCol " + j,
width: 160,
//minWidth: 120,
align: "center"
}];
colModel[i] = headerCol;
}
//colModel[0].colModel[1].hidden = true;
//colModel[2].colModel[0].hidden = true;
var obj = {
hoverMode: 'cell',
showTitle: false,
toolbar:{
items: [
{
type: 'button',
label: 'Toggle collapsed',
listener: function(){
var grid = this;
grid.Columns().alter(function(){
grid.option('colModel').forEach(function(column){
column.collapsible && (column.collapsible.on = !column.collapsible.on);
})
})
}
}
]
},
minWidth: 400,
numberCell: {width: 40},
editable: false,
resizable: true,
hwrap: false,
colModel: colModel,
dataModel: { data: data }
};
pq.grid("#grid_infinite", obj);
});
The biggest issue is you may be scrolling to see a particular row of data, but as you scroll that row may actually jump out of the view because other rows data expands. So it is very hard to find the data you want to see.
I really think that you need to restore the virtualX option at least. Or if there is a way for us to calculate the height of all the cells in a row even if not rendered we could use that to set the fixed row height of each row.
This may not be a common problem for applications that are intended to be more spreadsheet like where the contents of cells is relatively small. But in our case we often have cells that will contain multiple lines of data in multiple columns.
