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
Simple improvements to making decisions in teams
Software development teams need to make a lot of decisions. Functional requirements, non-functional requirements, user experience, API contracts, tech stack, architecture, database schemas, cloud providers, deployment strategy, test strategy, security, and the list goes on. […]
JavaScript Bundle Optimization – Polyfills
If you are lucky enough to only support a small subset of browsers (for example, you are targeting a controlled set of users), feel free to move along. However, if your website is open to […]
Creating Mocks For Unit Testing in Go
Unit testing is an important part of any project, and Go built its framework with a testing package; making unit testing part of the language. This testing framework is good for most scenarios, but you […]
Resetting Database Between Spring Integration Tests
When tasked with having to write an integration test or a Spring Webflux test that uses a database, it can be cumbersome to have to reset the database between each test by using @DirtiesContext. Using […]