Combining Views: Row Selection and Independent Scrolling
That's nice so far. The column header stays in place while the user scrolls down, making them easy to identify. Can we apply to that rows as well?
Yup. You can make row headers that stay in place and act as selection points.. What's more, you can split your grid into arbitrary scrollable sections that can stay in sync or scroll independently. You do this by gluing more than one view into a structure.
Selectable Rows
By default, when you click on a cell, you select that cell and the entire containing row. A special view called dojox.grid.GridRowView draws a column of empty handles. When clicked, these handles select the row without selecting a particular cell. Unlike most other views, GridRowView has no "cells" property, only a width. So adding this to the structure on our last page:
var rowbar = { type: 'dojox.GridRowView', width: '20px' }; // a grid layout is an array of views. var layout = [ rowbar, view1 ];
The resulting page (downloadable below as grid1.html), yields:

As you would expect, CTRL+click selects non-contiguous rows and SHIFT+click selects contiguous ones. As it stands, the selection is only for display. In the Events section, we'll actually do something with the rows.
Linked Scrollable Views
You may have noticed that the Selection bar rows and the data rows scroll together. So it's no surprise that when you add another view, it too scrolls vertically in sync.
To see this, we'll split off the Dijit class name into its own view:
// a grid view is a group of columns var view1 = { cells: [[ {name: 'Namespace', field:0, width: "25em"} ], [ {name: 'Summary', colSpan:"2", field:2} ] ] }; var rowbar = { type: 'dojox.GridRowView', width: '20px' }; var fixedColumn = { cells: [[ {name: 'Class', field:1, width:"25em"} ]] };
Since we're using fields in a different order, specifying the field numbers in each cell definition is mandatory. Now combine that into a layout like this:
var layout = [ rowbar, fixedColumn, view1 ];
And you get two grids with separate scroll bars. By default each scrollbar moves both views in sync with each other.

Admittedly, the extra scroll bar isn't very useful. But when you add fields to the right hand grid like so:
var view1 = { cells: [[ {name: 'Namespace', field:0, width:"20em"}, {name: 'Description', field:3, width:"20em"} ], [ {name: 'Summary', field:2}, {nane: 'Examples', field:4} ] ] };
And run the example, you find the bottom scroll bar scrolls the views independently. We say the views are vertically dependent, but horizontally independent.
Now you turn off the scroll bar in the left hand view with the noscroll property:
var fixedColumn = { noscroll: true, cells: [[
Yields:

Attachment | Size |
---|---|
grid1.html | 1.85 KB |
grid2.html | 1.92 KB |
grid3.html | 2.05 KB |
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
#grid style width
The width style for the grid id on the previous page is not wide enough to see this example properly. I set it to #grid { width: 75em;} and it looks much better.
autoHeight and autoWidth for auto of these (sort of)
Found this at http://www.turboajax.com/products/turbogrid/documentation/, which dojo 1.0.2's README file for dojox.Grid says is the legacy documentation.
However, only autoHeight worked for me: it filled FF's window on OS X. autoWidth didn't attempt to match the width of the cells' contents.
Thus:
Vertical / horizontal scrolling
Is there a way to turn on/off only vertical scrolling?
By something like this:
?