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
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]