Blog / 2011 / September / 27

Basic Dojo Grid

September 27, 2011

Here's an example of a web page that shows the Dojo grid component.

Head Section

The head section needs to load Dojo with the parseOnLoad set to true. It also needs to load the appropriate css.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />

JavaScript

We need to load the DataGrid and DataStore modules, and then we define our data and link it into our grid

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");

function init() {
  var lData = {
    items: [
           {
           "position" : "1",
           "band" : "Black Dyke",
           "conductor": "Nick Childs"
           },
           {
           "position" : "2",
           "band" : "Carlton Main",
           "conductor": "Philip McCann"
           },
           {
           "position" : "3",
           "band" : "Grimethorpe",
           "conductor": "Allan Withington"
           },
           {
           "position" : "4",
           "band" : "Brighouse and Rastrick",
           "conductor": "David King"
           },
           {
           "position" : "5",
           "band" : "Rothwell Temperance",
           "conductor": "David Roberts"
           },
         ],
    identifier: "position"      
  };

  var dataStore = new dojo.data.ItemFileReadStore({data:lData});
  var grid = dijit.byId("theGrid");
  grid.setStore(dataStore);
}

dojo.ready(init);

HTML

Finally, here's the HTML. We declare a table with a thead block containing the th tags. The fieldname from the data is linked to the appropriate th, and a default width is set.

By setting autoHeight and autoWidth we don't get an embedded scroll area - the table grows to take up the area it needs.

<body class="claro">
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto">
  <thead>
    <tr>
      <th field="position" width="200px">Position</th>
      <th field="band" width="200px">Band</th>
      <th field="conductor" width="200px">Conductor</th>
    </tr>
  </thead>
</table>
</body>

Problems

  • The inital problem I had was that the table was showing, unstyled, with headers but no data. This was cured by setting the parseOnLoad flag to true.

References

Tags: dojo grid javascript