A quick note on Dojo's data grids and dojox.data.HtmlStore

I’m spending this day trying to create an “universal” administration dashboard with which I’ll finally be happy with. I’m using Dojo to spice up the UI, because I think it’s awesome and it has a lot of stuff in it and plays well with Zend Framework. This post is dedicated to the future stupid me.

Anyway, when using dojox.data.HtmlStore as a store for a dojox.data.DataGrid (or any other grid, really), pay attention to the definition of the columns structure which is passed to the grid. I was doing a really stupid thing which cost me a bunch of hours until I finally figured out what was going on.

Let’s take for example this is the given HTML table:

<table id="datastore">
<thead>
    <tr>
    <th>ID</th>
    <th>Name</th>
    </tr>
</thead>
<tbody>
    <!-- body comes here -->
</tbody>
</table>

I was defining the structure for the columns as:

var struct = [[
   { field: 'id', name: 'ID', width: 'auto' },
   { field: 'name', name: 'Name', width: 'auto'}
]];

which was wrong. This is the correct one:

var struct = [[
   { field: 'ID', name: 'ID', width: 'auto' },
   { field: 'Name', name: 'Name', width: 'auto'}
]];

Use what’s in the TH tags for the field properties! I was trying to be clever and use the name of the fields in the database. The worst part is that there will be no errors, the grid will render correctly the header row and a correct number of rows for the data, but! it will show “…” in each column, instead of the actual data.

Happy hackin’!