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.
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}
<script type="text/javascript">
        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.