Dojo Datagrid
Recently at a client site, I was assigned a task to find a good data table widget, that would handle column sorting, highlighting, and the like. But it had to work with the current technology stack. Since Dojo was already part of that stack, I started there.
To my joy and suffering, I found a little hidden gem called the Dojo DataGrid. Joy, because it covered all the requirements of my client, but suffering, since the documentation for the latest version was completely non-existent. When I say completely, I mean COMPLETELY. The web page on Dojo’s site had TODO under every section. Doing a Google search found tons of information, but for older versions.
So I thought I would put my findings here, so you don’t have to hunt the info down.
To programmatically build the DataGrid you must first add in the Data grid class, the class of your data store and the source location of the data used for display. Below I am using a csv file to load data into the grid. Later, I will show you how to bring in a json object.
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.CsvStore");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojox.data.CsvStore({
url: 'players.csv'
});
Then layout your table in your desired fashion. Here I have 4 columns of data. “Field” represents the column heading from the csv file. “Name” is the column heading title, which will be displayed in the table. “Width” is the desired width of the column. You can specify a specific pixel width or let the browser assign a width to the column by adding the key word ‘auto’ to the width parameter.
// set the layout structure:
var layout = [{
field: 'Player',
name: 'NHL All Time Point Leaders',
width: '200px'
},
{
field: 'Games',
name: 'Games Played',
width: '50px'
},
{
field: 'Points',
name: 'Points',
width: 'auto'
},
{
field: 'PPG',
name: 'Points Per Game',
width: 'auto'
}];
Once you have the layout complete, create a instance of the DataGrid object. Here you fill in your default query, link in you datastore, and tell the DataGrid you use your previously created layout.
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {Player: '*' },
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
After that, all you need to to is tell the browser where the grid should be located once created
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
<body>
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
To use a json object instead of a remove the csvStore class and replace it with a ItemFileReadStore object
dojo.require("dojo.data.ItemFileReadStore");
Then change the datastore creation like so,
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileReadStore({
url: 'players.json'
});
The DataGrid can also be built declaratively, below creates the above json DataGrid table
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.DataGrid");
var jsonStore;
</script>
<div dojoType="dojo.data.ItemFileReadStore" url="pois.json" jsId="jsonStore"></div>
<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid" autowidth="true" autoheight="true"
query="{ player: '*' }" clientSort="true" store="jsonStore" style="width:400px" >
<thead>
<tr>
<th field="Player" width="200px">NHL All Time Point Leaders</th>
<th field="Games" width="200px">Games Played</th>
<th field="Points" width="auto">Points</th>
<th field="PPG" width="80px">Points Per Game</th>
</tr>
</thead>
</table>
Once you get the gist of the DataGrid, it becomes easy to build. Granted this is a simplistic example of it’s use, and there are many more bells and whistle you can add to the grid for functionality. But, now you have a solid framework to start with. The example code from the programmatic examples can be download here
About the Author
