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. Required fields are marked *

Related Blog Posts
AWS Cloud HSM, Docker and NGINX
There is quite a bit of easily searchable content on the security benefits of leveraging a Hardware Security Module to manage cryptographic keys, so I will leave that to the scope of another article. The […]
Google Professional Machine Learning Engineer Exam 2021
Exam Description A Professional Machine Learning Engineer designs, builds, and productionizes ML models to solve business challenges using Google Cloud technologies and knowledge of proven ML models and techniques. The ML Engineer is proficient in all aspects […]
Designing Kubernetes Controllers
There has been some excellent online discussion lately around Kubernetes controllers, highlighted by an excellent Speakerdeck presentation assembled by Tim Hockin. What I’d like to do in this post is explore some of the implications […]
React Server Components
The React Team recently announced new work they are doing on React Server Components, a new way of rendering React components. The goal is to create smaller bundle sizes, speed up render time, and prevent […]