Grid Tag

Grid Sizing

By default, the grid fits exactly in the parent DOM node provided for it. If all of the rows do not fit, a vertical scroll bar appears. Likewise, if all the columns don't fit, the horizontal scroll bar appears. Nothing surprising there.

The following properties resize the grid to fit all of the columns. In essence, setting either of these makes the appropriate scroll bar disappear.

  • autoHeight: resize the grid height to fit all of the rows.
  • autoWidth: resize the grid width to fit all the rows.

You may either set these on the Grid tag itself, or set the properties through JavaScript and call dojox.grid.Grid.update() to redraw. You can also resize the width and height of the container (dojo.contentBox is good for this) and call update().

dijit.Grid
A grid widget with virtual scrolling, cell editing, complex rows, sorting, fixed columns, sizeable columns, etc.
Attributes
autoHeight Boolean If autoHeight is true, grid height is automatically set to fit the data.
autoRender Boolean If autoRender is true, grid will render itself after initialization.
autoWidth Boolean If autoWidth is true, grid width is automatically set to fit the data.
defaultHeight string default height of the grid, measured in any valid css unit.
elasticView Integer One of the views in the grid may be "elastic", that is: expanding or contracting to fill the remaining size when all non-elastic elements are placed. By default, the middle view is elastic. Specifying this property makes the indexed grid view elastic.
fastScroll Boolean flag modifies vertical scrolling behavior. Defaults to true but set to false for slower scroll performance but more immediate scrolling feedback
keepRows Integer Number of rows to keep in the rendering cache.
model String or Object Current grid data model. Should only be used for retrieving the model. Setting should be accomplished using setModel(newModel) as outlined below.
rowCount Integer Number of rows to display
rowsPerPage Integer Number of rows to render at a time.
singleClickEdit Boolean Single-click starts editing. Default is double-click
structure Object or String View layout defintion. Can be set to a layout object, or to the (string) name of a layout object.
Methods
addRow(/* Array */ inRowData, /* Integer */ inIndex) Add row inRowData after row[inIndex] in both displayed grid and model
String get(/* Integer */ inRowIndex) Get raw data at row inRowIndex in the current cell position.
dojox.grid.Cell getCell(/* Integer */ inIndex) Get the cell object (the column definition) in column inIndex
String getCellName(/* Integer */ inIndex) Get the column name of inIndex
Boolean canSort(/* Integer */ inSortInfo) Sort information, in sortInfo is 1-based index of column on which to sort, positive for an ascending sort and negative for a descending sort returns true if grid can be sorted on the given column in the given direction
Boolean getSortAsc(/* Integer */ inSortInfo) returns true if grid is sorted in an ascending direction.
Integer getSortIndex() returns index of sorted field
refresh() re-render the grid with the new data model
removeSelectedRows() remove all selected rows in displayed grid and model
render() Render the grid, headers, and views. Edit and scrolling states are reset. To retain edit and scrolling states, see Update.
renderAtIdle() Same as render, but wait until all background processing has completed.
resize() Call after setting width or height
resizeHeight() Call after setting just the height
setCellWidth(/* Integer */ inIndex. /* String */ inUnitWidth) Set column size to a given CSS unit width
setModel(/* dojox.grid.model */ inModel) set the grid's data model
setSortIndex(/* Integer */ inIndex, /* Boolean */ inAsc) Sets a sort column and direction (true=ascending, false=descending).
setStructure(/* dojox.grid.Structure */ inStructure) Install a new structure and rebuild the grid.
scrollTo(/* Integer */ inTop) Vertically scroll the grid to a given pixel position
scrollToRow(/* Integer */ inRowIndex) Scroll the grid to a specific row.
sort() sort on current sort field
update() Update the grid, retaining edit and scrolling states.
updateRow(/* Integer */inRowIndex) Change the number of rows.
updateRowCount(/* Integer */inRowCount) Update row count property to inRowCount
updateRowStyles(/* Integer */inRowIndex) Update the styles for a row after it's state has changed.