Jul 23, 2010

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

Object Partners profile.
Leave a Reply

Your email address will not be published.

Related Blog Posts
Android Development for iOS Developers
Android development has greatly improved since the early days. Maybe you tried it out when Android development was done in Eclipse, emulators were slow and buggy, and Java was the required language. Things have changed […]
Add a custom object to your Liquibase diff
Adding a custom object to your liquibase diff is a pretty simple two step process. Create an implementation of DatabaseObject Create an implementation of SnapshotGenerator In my case I wanted to add tracking of Stored […]
Keeping Secrets Out of Terraform State
There are many instances where you will want to create resources via Terraform with secrets that you just don’t want anyone to see. These could be IAM credentials, certificates, RDS DB credentials, etc. One problem […]
Validating Terraform Plans using Open Policy Agent
When developing infrastructure as code using terraform, it can be difficult to test and validate changes without executing the code against a real environment. The feedback loop between writing a line of code and understanding […]