Login Register

Set max height for grid?

Is there are way to set a Max Height? If the number of rows does not
fill the Max Height, I want autoHeight behavior. But if the rows exceeds
the Max Height, I want a fixed defaultHeight behavior, with scroll bars
on the grid.

My app will refresh the grid with different data. It looks silly
to reserve enough room for 20 rows and then have only 3 to display;
autoHeight would be best. However, autoHeight is deadly when I have
500 rows to display.

Perhaps calling something

Perhaps calling something like this after the grid has finished its initial rendering might work:

var maxHeight = 500; // pixels
grid.autoHeight = (grid.views.measureContent() < maxHeight);
grid.resize();

When is grid rendered?

I tried to implement something like this functionality, but could not figure out how to tell when the model was finished loading.

Instead of setting autoHeight, my solution was to just set the height of the containing div, which works rather well.

To know when the model is finished loading, I created a new event for DojoData model (see enhancement request here: http://trac.dojotoolkit.org/ticket/6725). For setting the size, this approach basically works (fine tune as desired):

// this is inside a widget definition, this.gridWrap is a wrapper div in the template, this.grid is my grid object, this.model is the model (also available at this.grid.model)
  modelDataLoaded: function(){
                        // resize, hard-coded row height and extra blank space:
                        var hght = this.grid.views.measureHeader() + (this.model.getRowCount()*36)+72;
                        if (hght > 500) {
                                hght = 500;
                        }
                        this.gridWrap.style.height=hght+'px';
                        this.grid.refresh();
  },
// in the startup function, after the model is created, be sure to do this:
 this.model.observer(this);
// which registers the widget as an observer, making the function above get called automatically whenever the model loads new data

--
John Locke
http://www.freelock.com

I use a BorderContainer

and put the grid in the "center" region. No need to specify height at all that way.

Doesn't work for content pane

My application uses a tab container, and each tab is a content pane that loads a mix of content. Grids in these tabs are usually surrounded by buttons, tabs, and sometimes another grid. In this situation, width works fine, but height keeps expanding, every time the grid is re-rendered, until you've got a very large scrolling tab...

Cheers,
--
John Locke
http://www.freelock.com

i have the same layout

I also have a tab container, but instead of using a ContentPane as the child of the TabContainer, I use a BorderContainer. In the BorderContainer, the top region is for buttons and the center region is for the grid. I also have another tab where the center region of the BorderContainer is another BorderContainer, so I can have multiple grids on one tab page and have the height of the scrollbars always automatically handled by always placing them in the center region of a BorderContainer.

I also have a TabContainer with a ContentPane child on which I call setContent passing a BorderContainer widget domNode and it works the same.