Model Options
Array Models
Instead of feeding dojo.data sources to the grid, you may feed it a two-dimensional array. This approach works well for grids with fixed data, e.g. static reference tables. Here's an example culled from the unit test /dojoroot/dojox/grid/tests/test_grid.html. Note the following:
- Fields are numbered, not named, and start at 0.
- If the cells are laid out in the same order as the data elements, you may omit the field: property in the cells.
- Placing the initialization code in addOnLoad is necessary when using CDN because of the dojox.grid.data.Table reference.
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
// We need to place the initializations here because of CDN. This way they
// are run after dojo.require's are loaded (we need dojox.grid.data.Table
// in particular, but before grid is drawn.
dojo.addOnLoad(function() {
var data = [
[ "normal", false, "new", 'But are not followed by two hexadecimal',
29.91, 10, false ],
[ "important", false, "new", 'Because a % sign always indicates', 9.33, -5, false ],
[ "important", false, "read", 'Signs can be selectively', 19.34, 0, true ],
[ "note", false, "read", 'However the reserved characters', 15.63, 0, true ],
[ "normal", false, "replied", 'It is therefore necessary', 24.22, 5.50, true ],
[ "important", false, "replied", 'To problems of corruption by', 9.12, -3, true ],
[ "note", false, "replied", 'Which would simply be awkward in', 12.15, -4, false ]
];
// global var "model"
var model = new dojox.grid.data.Table(null, data);
var view1 = {
cells: [[
{name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'},
{name: 'Column 3', width: "150px"}, {name: 'Column 4'}
],[
{name: 'Column 5'}, {name: 'Column 6'}, {name: 'Column 7'},
{name: 'Column 8', field: 3, colSpan: 2}
]]
};
var layout = [ view1 ];
// Now set the model and structure
gridWidget.setModel(model);
gridWidget.setStructure(layout);
});
</script>
</script>
</head>
<body class="tundra">
<div class="heading">dojox.Grid Basic Test</div>
<div id="grid" dojoType="dojox.Grid" jsId="gridWidget"></div>
</body>
</html>
</script>
Observers
You can watch for changes to cells at the model level. This is called setting an observer and it followed the familiar Observer Design Pattern. With array-fed Grids, these are your only hook-in points for sending XHR back to the server. As we saw in Events, you can use dojo.Data's notification API, or the Observer API for the same thing.
To observe a model, you first create an object literal with function properties. These functions must be named:
- modelChange: called when any cell data changes (due to editing or calling change methods on the model).
- modelInsertion: called when a row is added
- modelRemoval: called when a row is removed.
- modelAllChange: called when entire model needs to be re-rendered.
- modelRowChange: called when a row is changed
- modelDatumChange: called when cell data changes
For example, this observer watches all model changes and updates a visible row count.
var modelObservers = { modelChange:function(){ dojo.byId("rowCount").innerHTML = 'Row count: ' + model.count; } }
Then you register the observer with the model:
model.observer(modelObservers);
dojox.grid.data.Model
The raw data behind a grid. Can be retrieved from a grid by accessing the
grid's public 'model' attribute. The model can be set for a grid by calling
setModel(newModel).
|
||
Properties
|
||
clientSort | Boolean | User is allowed to sort by clicking column headers (dojo.data models only) |
count | Integer | Number of rows currently in the model |
query | Object | dojo.data query for current store (dojo.data stores only) |
rowsPerPage | Integer | Rows to scroll down before another set of rows is rendered. |
store | String | dojo.data store variable (dojo.data stores only) |
updating | Integer | Number of rows in an UPDATING state |
Methods
|
||
String getDatum(/* Integer */inRowIndex, /* Integer */inColIndex) | Return data at the location. Column indexes are id's for dojo.data models, integers for array models. | |
Integer getColCount() | Return number of columns | |
Object getRow(/* Integer */inRowIndex) | Returns item for dojo.data elements, array for array-based elements, at inRowIndex | |
Integer getRowCount() | Returns number of rows in model | |
notObserver(/* Object */ inObserver) | De-register an observer. | |
observer(/* Object */ inObserver, /* String */inPrefix) | Register an observer object with the model. inPrefix is added to each function name before calling, as in myPrefixModelChange. That way you can specify multiple observers in the same object. | |
Integer pageToRow(/* Integer */inPageIndex) | Starting row number on given page | |
Integer rowToPage(/* Integer */inRowIndex) | Return page number for this row | |
setDatum(/* Object */inDatum, /* Integer */inRowIndex, /* Integer */inColIndex) | Set the data at the given position. Normally called by cell editing. | |
setRow(/* Object */inRow,/* Integer */inRowIndex) | Overwrite the row at the given index. Row must be in same object format as other rows, e.g. an item for dojo.data models or array for array models. | |
swap(/* Integer */inIndexA, /* Integer */inIndexB) | Swap rows A and B in model. |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Model not yet wiredup with dataStore onNew and onDelete
as at Grid 1.0
you may need to extend dojox.grid.data.DojoData and wire up this last mile in its constructor like this:
and also overload the following method for refreshing / markup: