Dynamic Page Size For the Grid

[thejoker101]

I'd like to start investigating how to do dynamic page sizes for the grid. To put it more verbosely, I'd like it so that there is no scroll bars on my paged grid. If I change the size of the grid (mine dynamically sizes to it's container) then the size of the page would resize as well.

The backend script that creates my JSON data doesn't know explicitly what size the pages are, so I would think that on a grid resize(or init), the script could determine the max number of rows that could fit within the grid without scrolling and then set that to the size of the page.

Does that make sense?

[thejoker101]

Well, here's my first crack at it. For the most part it seems to work.

Perhaps someone else can try this out and see if there are any modifications that could be made.



var Grid = {
init: function() {
var schema = {
root: 'ResultSet',
totalProperty: 'totalCount',
id: 'index',
fields: ['col','col','col','col','col','col','col']
};
this.dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
this.dataModel.onCellUpdated.subscribe(this.onCellUpdated);
this.dataModel.initPaging('...json url...',10);
var myColumns = [
{header: "col",width: 80, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col", width: 80, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col", width: 90, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col",width: 200, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col", width: 80, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col", width: 90, sortable: true, editor: new YAHOO.ext.grid.TextEditor()},
{header: "col", width: 300, sortable: true, editor: new YAHOO.ext.grid.TextEditor()}
];
this.colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
this.grid = new YAHOO.ext.grid.EditorGrid('grid', this.dataModel, this.colModel);
this.grid.render();

var toolbar = this.grid.getView().getPageToolbar();
toolbar.addSeparator();
toolbar.addButton({
className: 'excel-button',
text: "Excel",
click: excelFormat
});

this.dataModel.loadPage(1);

},
onLoad: function() {
this.grid.getSelectionModel().selectFirstRow();
this.loaded = true;
resizeGrid();
YUE.addListener(window,'resize',resizeWrapper);
resizeWrapper();
},
onCellUpdated: function(dataModel, rowIndex, colIndex, e) {
// send update to server
}
}

var excelFormat = function() {
window.open('...excelurl...');
}

function receivingInit() {
resizeGrid();
YUE.addListener(window,'resize', resizeGrid);
}

/* makes the bottom section scroll bars properly fit on the bottom section */
function resizeGrid() {
var viewportHeight = YAHOO.util.Dom.getViewportHeight();
$('grid').setHeight(YAHOO.util.Dom.getViewportHeight() - $('header').getHeight() - $('footer').getHeight());
$('grid').setWidth($('column_left').getWidth() - 10);
}

function resizeWrapper() {
if(Grid.loaded) {
var row = YAHOO.util.Dom.getElementsByClassName('ygrid-row', 'span', 'grid')[0];
var rowHeight = getEl(row).getHeight(); // initially: 21px in FF, 22px in IE7
var gridWrap = YAHOO.util.Dom.getElementsByClassName('ygrid-wrap', 'div', 'grid')[0];
var wrapperHeight = getEl(gridWrap).getHeight(); // initially: 460px, ? in IE7
if(Grid.colModel.getTotalWidth(true) > getEl(gridWrap).getWidth()) {
wrapperHeight = wrapperHeight - 17;
}
var newPageSize = Math.floor(wrapperHeight / rowHeight);
if(newPageSize != Grid.dataModel.getPageSize()) {
if(newPageSize != undefined) {
Grid.dataModel.initPaging('...json url...',newPageSize);
Grid.dataModel.loadPage(1);
}
}
}
}


YAHOO.util.Event.addListener(window,'load', receivingInit);
YAHOO.util.Event.on(window,'load',Grid.init,Grid,true);

[jack.slocum]

Cool.

By the way, you can have the getWidth/getHeight/getSize calls dynamically remove padding/borders (like your getWidth()-10 hardcoded) by passing true as the first parameter.

[mdissel]

function resizeGrid() {
var viewportHeight = YAHOO.util.Dom.getViewportHeight();
$('grid').setHeight(YAHOO.util.Dom.getViewportHeight() - $('header').getHeight() - $('footer').getHeight());
$('grid').setWidth($('column_left').getWidth() - 10);
}

This part contains hard-coded dependencies.. Is is not possible to get the height/width of the parent dom element that contains the grid div?

Thanks

Marco