Dojo 1.2 Grid

July 14th, 2008 - by Bryan Forbes

With the release of Dojo 1.2 right around the corner, there’s an updated grid widget available. It offers new features and performance improvements over the existing grid including better Dojo data integration, simplified layout structures, and the ability to enable editing much more easily.

In order to make these improvements, we were forced to break backwards compatibility between the new grid and the old grid. This shouldn’t be a surprise since the grid is part of DojoX. We realized that enough people use, rely on, and extend the grid that we didn’t want to break applications based on Dojo 1.0 and 1.1, so both grids are available to you. The old grid will be available until Dojo 2.0, but it will not be improved in future versions of Dojo 1.x.

This article focuses on the use of the new grid widget. All of the examples presented in this article may be downloaded in a tarball so you can modify and follow along.

Logical File Layout

The new grid API has been organized according to the Dojo conventions. For instance, the old dojox.VirtualGrid is now dojox.grid._Grid, dojox.Grid is now dojox.grid.DataGrid, and dojox.grid.selection is now dojox.grid.Selection. The namespace that objects are in now also reflect where you can find them in the file system.

Dojo Data Integration

I mentioned that dojox.Grid is now dojox.grid.DataGrid, but why is it called DataGrid? The reason is that DataGrid natively supports dojo.data stores. In order to use dojo.data stores with the grid in previous releases, you needed the dojox.grid.data.DojoData model which would bridge the gap between the grid and the store. DataGrid has been engineered to remove that bridge. Instead of using stand-alone models to store data for the grid, any dojo.data store that implements the Dojo Data read API can be used. Additionally, DataGrid can use the write and notification API’s if they are available. Let’s look at an example (using the data from my previous grid tutorials modified to work with ItemFileReadStore):

var jsonStore = new dojo.data.ItemFileReadStore({ url: "json/gaskets.json" });

var grid = new dojox.grid.DataGrid({
id: ‘grid’,
query: { part_num: ‘*’ },
store: jsonStore,
structure: layout
}, ‘gridNode’);

This will load our JSON file from a URL and give us access to the data through the Dojo Data API. We then pass the store to the DataGrid constructor along with the query we want the grid to run against the store. We’ll get to defining a layout in a bit, but for now let’s look at some more things we can do with this new grid.

I mentioned notification API support. This means if the store changes, the grid will update. Let’s set up an example:

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });

var grid = new dojox.grid.DataGrid({
id: ‘grid’,
query: { part_num: ‘*’ },
store: jsonStore,
structure: layout
}, ‘gridNode’);

<button onclick="updateGasketTypes();">Change gasket types</button>

When the button is clicked, any item that has a ‘1′ in the third number of its part number will have its type changed to 2 and the grid will update its information.

Layout Structure Simplified

In previous versions of the grid, setting up how you wanted the grid to look was sometimes confusing. With this latest version we have tried to make setting up the look of the grid simpler while still allowing flexibility for those that need it. There are now two ways to lay out your grid: markup and programatically.

Layouts with markup

Previously the only way to set up your grid’s layout for use in markup was with a structure defined in a script block. Those days are long gone! Setting up a grid’s layout is now as simple as this:

<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ part_num: ‘*’ }" store="jsonStore">
<thead>
<tr>
<th field="part_num">Part Number</th>
<th field="min_temp" width="100px">Minimum Temperature</th>
<th field="max_temp" width="100px">Maximum Temperature</th>
<th field="type" width="100px">Type</th>
<th field="thick" width="5em">Thickness</th>
</tr>
</thead>
</table>

One of the cool features of the grid is that you can group certain columns and lock them from scrolling horizontally. You can set that up with markup as well:

<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ part_num: ‘*’ }" store="jsonStore">
<colgroup span="1" noscroll="true"></colgroup>
<colgroup span="4"></colgroup>
<thead>
<tr>
<th field="part_num" width="300px">Part Number</th>
<th field="min_temp" width="100px">Minimum Temperature</th>
<th field="max_temp" width="100px">Maximum Temperature</th>
<th field="type" width="100px">Type</th>
<th field="thick" width="5em">Thickness</th>
</tr>
</thead>
</table>

With colgroup we are able to lock the first column and allow the last four columns to be horizontally scrolled. You can even set up multiple rows within each row while spanning cells between rows and columns:

<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ part_num: ‘*’ }" store="jsonStore">
<thead>
<tr>
<th field="part_num" rowspan="2">Part Number</th>
<th field="min_temp" width="100px">Minimum Temperature</th>
<th field="max_temp" width="100px">Maximum Temperature</th>
<th field="type" width="100px">Type</th>
</tr>
<tr>
<th field="thick" colspan="3" width="5em">Thickness</th>
</tr>
</thead>
</table>

You can even define formatters and getters for columns:

function formatDegrees(value){
return value + ‘°’;
}

function getODtoID(rowIndex, item){
if(!item){
return this.defaultValue;
}
var grid = dijit.byId(‘gridNode’);
var od = grid.store.getValue(item, "outer");
var id = grid.store.getValue(item, "inner");

return od – id;
}

<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ part_num: ‘*’ }" store="jsonStore" rowSelector="20px">
<thead>
<tr>
<th field="part_num">Part Number</th>
<th field="min_temp" formatter="formatDegrees" width="100px">
Minimum Temperature
</th>
<th field="max_temp" formatter="formatDegrees" width="100px">
Maximum Temperature
</th>
<th field="type" width="50px">Type</th>
<th field="thick" width="5em">Thickness</th>
<th width="5em" get="getODtoID">OD to ID</th>
</tr>
</thead>
</table>

Another popular Dojo grid feature is dojox.GridRowView. It provides a view at the left side of the grid that allows you to select rows easily. For Dojo 1.2, that has been renamed to dojox.grid._RowSelector and can be enabled by passing an option to the grid:

<table id="gridNode" jsId="grid" dojoType="dojox.grid.DataGrid"
query="{ part_num: ‘*’ }" store="jsonStore" rowSelector="20px">
<thead>
<tr>
<th field="part_num">Part Number</th>
<th field="min_temp" width="100px">Minimum Temperature</th>
<th field="max_temp" width="100px">Maximum Temperature</th>
<th field="type" width="100px">Type</th>
<th field="thick" width="5em">Thickness</th>
</tr>
</thead>
</table>

By passing “20px” to the grid in the rowSelector attribute, we are telling the grid we want the row selector to be 20 pixels wide. You can also pass a boolean value (if it’s true, you get the default size) or any other valid css size.

Putting this all together, we can port our previous application to the new API. Just look at the source of here.

Programmatic Layouts

If markup isn’t your thing or you’re creating your grid on the fly you’ll be glad to know that we’ve simplified the structure you pass in to the grid to define the layout. Previously you were required to pass in a structure like this to get something similar to our first markup example:

var layout = [
// view 0
{
cells: [[
{ field: "part_num", name: "Part Number", width: ‘auto’ },
{ field: "min_temp", name: "Minimum Temperature",
width: "100px" },
{ field: "max_temp", name: "Maximum Temperature",
width: "100px" },
{ field: "type", name: "Type", width: "100px" },
{ field: "thick", name: "Thickness", width: "5em" }
]]
}
];

var grid = new dojox.grid.Grid({
structure: layout,
model: model
}, ‘gridNode’);

Now, you can trim it down to something like this:

var layout = [
{ field: "part_num", name: "Part Number", width: ‘auto’ },
{ field: "min_temp", name: "Minimum Temperature", width: "100px" },
{ field: "max_temp", name: "Maximum Temperature", width: "100px" },
{ field: "type", name: "Type", width: "100px" },
{ field: "thick", name: "Thickness", width: "5em" }
];

var grid = new dojox.grid.DataGrid({
query: { part_num: ‘*’ },
store: jsonStore,
structure: layout
}, ‘gridNode’);

Multiple rows of cells is also easier. Before we had to do this:

var layout = [
// view 0
{
cells: [[
{ field: "part_num", name: "Part Number", width: ‘auto’,
rowSpan: 2 },
{ field: "min_temp", name: "Minimum Temperature",
width: "100px" },
{ field: "max_temp", name: "Maximum Temperature",
width: "100px" },
{ field: "type", name: "Type", width: "100px" }
],[
{ field: "thick", name: "Thickness", width: "5em",
colSpan: 3 }
]]
}
];

var grid = new dojox.grid.Grid({
structure: layout,
model: model
}, ‘gridNode’);

And now:

var layout = [[
{ field: "part_num", name: "Part Number", width: ‘auto’, rowSpan: 2 },
{ field: "min_temp", name: "Minimum Temperature", width: "100px" },
{ field: "max_temp", name: "Maximum Temperature", width: "100px" },
{ field: "type", name: "Type", width: "100px" }
],[
{ field: "thick", name: "Thickness", width: "5em",
colSpan: 3 }
]];

var grid = new dojox.grid.DataGrid({
query: { part_num: ‘*’ },
structure: layout,
store: jsonStore
}, ‘gridNode’);

If you want to add the row selector, just change the constructor call to this:

var grid = new dojox.grid.DataGrid({
query: { part_num: ‘*’ },
structure: layout,
store: jsonStore,
rowSelector: ‘20px’
}, ‘gridNode’);

Now you can see the application from my previous post ported to the new programmatic API.

Editing redefined

In order to edit a value in the old grid, you would have to pass an editor class to your cell definition. In the new grid, each cell has a default editor defined; all you have to do is add editable: true to your cell definition and use a store that implements the Dojo Data write API:

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });

var layout= [
{ field: "part_num", width: "auto", name: "Part Number" },
{ field: "min_temp", width: "100px", name: "Minimum Temperature" },
{ field: "max_temp", width: "100px", name: "Maximum Temperature" },
{ field: "type", width: "100px", name: "Type" },
{ field: "thick", width: "5em", name: "Thickness", editable: true }
];

var grid = new dojox.grid.DataGrid({
query: { part_num: ‘*’ },
store: jsonStore,
structure: layout,
rowsPerPage: 20
}, ‘gridNode’);

You can now edit the thickness property of each row of data. What if you don’t want to edit the data with a text box? Let’s say we want to set up a select to edit the type of gasket (cellType for the markup attribute name):

var layout= [
{ field: "part_num", width: "auto", name: "Part Number" },
{ field: "min_temp", width: "100px", name: "Minimum Temperature" },
{ field: "max_temp", width: "100px", name: "Maximum Temperature" },
{ field: "type", width: "100px", name: "Type", editable: true,
type: dojox.grid.cells.Select, options: [ ‘0′, ‘1′ ] },
{ field: "thick", width: "5em", name: "Thickness", editable: true }
];

Conclusion

The Dojo 1.2 Grid offers significant performance and API simplifications over previous versions of the Dojo Grid. As of Dojo version 1.2, you will be able to continue using the existing Dojo Grid, and also use the new Grid, even on the same page of an application if necessary. We highly recommend that you upgrade to the new version of the grid as soon as possible as the new feature set is worth the investment!

Tags: datagrid, dojox, grid

147 Responses to “Dojo 1.2 Grid”

philou says:

November 5, 2008 at 3:46 pm

@Laca

Hi,
indeed if I use
var currItem = this.getItem(inRowIndex);

inside my extended dojox.grid.DataGrid class I get the item which was just edited.
Thanks!

However, the update of the store after a successful ajax request still does not work, and I believe that is because by the time the ajax result comes back the this keyword no longer references the DataGrid, but the ajax object or whatever (it’s hard for me to tell from the Firebug debug info).

That’s why I was messing around with the dojo.hitch method, but my lack of understanding exactly what the dojo.hitch method does does makes that a bit difficult . Is there a way to wrap the store update code:

dojo.xhrGet( { url :ajaxUrl, handleAs :"text", handle : function(data, args) { if (typeof data != "error") { if ('OK' == data) {
// dojo.hitch the whole thing below? this.store.fetchItemByIdentity( { identity :this._by_idx[inRowIndex].idty, onItem :dojo.hitch(this, function(currItem) { this.store.setValue(currItem, inAttrName, inValue); this.onApplyCellEdit(inValue, inRowIndex, inAttrName); }) }) };

inside a dojo.hitch() statement, so that this.store.fetchItemByIdentity refers to the DataGrid.store as intended, and not to a non-existing ajaxobject.store ?

As a sidenote, I should maybe mention for whomever else reads this thread, that I had intended to use my hi-jacked doApplyCellEdit event to also validate the input of the grid cell, but I have discovered in the meantime that one can specify which dijit.form.widget to use as an editbox of a grid cell and the dijit can then also handle the validation, so no need to create extra validation functionality code. If anyone wants to see how it’s done, look inside this file in the dojo full distribution: dojox/grid/tests/test_edit_dijit.html

Thanks,
philou
Elan says:

November 7, 2008 at 10:19 am

I am trying to use the DataGrid, however I get the following error:
Sorry, an error occured. It shows up where the gris should have been. I get only the header (titles) row.
I use a JSON created by ItemFileReadStore.
Patch says:

November 7, 2008 at 4:13 pm

Still doesn’t work with latest release. From what I’ve seen of dojo so far, it’s still to early to use for professional application development.

The API documentation leaves a lot to be desired. The parameter “Object” is passed into almost every constructor/method, this to me is a poor way of doing things. I’ve had to look at the source code to find out what members of the “Object” need to be set.

On the majority of the forum posts I see “Having problem with X method/object/interface”. I’d rather see forum posts where users contribute unique ways of using the library rather than constantly trouble shooting the latest release.

GL2U
philou says:

November 8, 2008 at 7:59 am

@Elan

I had the same problem. I donwloaded the tarball archive mentioned in the first section on this page. using the included dojo distribution I had to find out that some files in my (current!) dustribution were not exactly where expected. Try to use the downloaded files to test your setup.

Good Luck!
philou
Darren says:

November 9, 2008 at 10:20 pm

I spent about 3 hours on this example. It wouldn’t work for me, in Dojo 1.1 or 1.2. Turns out having debugAtAllCosts enabled when loading dojo results in this error:

dojo.data.ItemFileReadStore is not a constructor

Turning debugAtAllCosts off prevents this error and allows page loading. This is reproducible. Not sure if it’s expected behavior, though.
Stephen D says:

November 13, 2008 at 1:54 pm

Ok, I’m really frustrated – I’ve read through this list of questions and answers twice, I’ve searched the internet, I’ve searched the Dojo forums, and I guess nobody else wants to do what I wont to do, or it’s so easy nobody else needs help. All I want to do is run a javascript (with data from the row) when I double click on a row. I had this figured out in Grid 1.1, but now, I either don’t know where to put the script, or I don’t know where to put the onRowDblClick. Does anybody know of an example, or can you you just point me in a direction?
Thanks,
Stephen
kzyp says:

November 13, 2008 at 2:27 pm

@Stephen: I think you may want this:
dojo.connect(grid,”onRowDblClick”,function(){
var item= grid.selection.getSelected()[0];
console.log(”here’s your item”, item);
});
Stephen D says:

November 13, 2008 at 3:57 pm

@kzyp: thanks for the quick response – I had just started working with that concept, here’s what wound up working for me:

dojo.connect(dijit.byID(’activeTickets’), ‘onDblClick’, showDetail);

I think the use of onDblClick instead of onRowDblClick is what was giving me such a problem.

Thanks.
Jens says:

November 14, 2008 at 10:37 am

How would i add links to columns while keeping the ability to sort?

Thanks
Jens
Jochen says:

November 20, 2008 at 7:45 am

Hi!
Is it possible to define a layout for a vertical table, so to speak turn it 90°?

Thanks.
Nima says:

November 20, 2008 at 1:12 pm

Ok, one really cool thing to be implemented in the grid (maybe v 1.3 ?) is a master detail like we use in asp.net. It’s one of the great features of ms ajax framework.

It seems very complicated to do this with the dojo grid. Basically what we’d need is hidden data (like the ID of an row element) that could be used to fetch some other piece of information (another data store…).
Still grid v1.2 is cool !
Mike says:

November 21, 2008 at 10:32 am

I can’t get any of these grid examples working. Can someone please post a simple single file example (similar to simple Grid) that works with the latest version of Dojo? I downloaded the tarball from this directory and just not a single thing will work at all.
lukasz says:

November 21, 2008 at 12:39 pm

@nima

just add an attribute to the data store that is not used as a column
and voila – here’s your ID element…

lukasz
Aveesh says:

November 27, 2008 at 9:15 am

Hi,

I finally got it to work after hunting around on the latest sitepen docs and some experimentation. Hopefully it will help out someone else too…

http://www.myconnectedlife.org/test/petrecord.htm
http://www.myconnectedlife.org/test/petrecord.json

I am an a PHP programmer and get frustrated not knowing JS/CSS as much as I would like too…If there is someone who is willing to work on fun/parttime projects helping me out with JS/CSS, I can help out server side with PHP/Database…Dojo is an awesome Web 2.0 front-end….
Aveesh says:

November 27, 2008 at 10:53 am

look in /dojo/dojox/grid/compat/tests folder of your dojo 1.2.1 documentation for a wealth of info….

wish i had seen it like 2 weeks ago….(i know – a noob comment but hope it helps other noobs out there)
Dan Antill says:

December 1, 2008 at 10:45 am

Hi – I have been working on a 3 level subgrid, based on the 2 level subgrid example in the dojo tests. I have 2 issues:
1. IE will not render the 3rd level subgrid – works fine in Firefox. subgrid.render() gives “unspecified error”
2. I have issues with setting the cell height when creating the 3rd level grid. The only solution I have found is creating the grid, then refreshing the outer grid, which rebuilds all grids. I have tried using the row height update for all parent cells, then calling row height changed. I also tried accessing the td for the cell and setting the height to the domNode.offsetHeight. I have also experiemented with autoheight and that didn’t help. I don’t understand why the example uses autoheight for the subrow but not for the main grid. The ONLY way I can set the height without refreshing everything is by setting the placeholder div height, before the grid is built – but that doesn’t work because I don’t now the grid height until the grid is built. Why does the example use a cacheHeight for the div? It seems unnecessary. Any suggestions?
Micah says:

December 10, 2008 at 3:28 pm

calculated columns don’t seem to sort correctly:

1) Go to the calc. column example: http://www.sitepen.com/labs/code/grid/dojo_grid_1.2/layout_markup_4.html

2) Click on OD to ID column. Sort triangles appear.

3) The value for the first four rows are 0.875, 6.1875, 2.75, 11.9375.

4) Scratch head.
David Zhao says:

December 17, 2008 at 2:34 pm

I have a simple question: with old grid, and can clear the grid data by: model.clearData(); NOw with the new grid, how do we achieve this?
Pablo Srasbstein says:

December 18, 2008 at 7:20 am

Hi i download the tar boal with the samples code , with the intention of running one of the programaticly layout sample on my local environment , simple eclipse 3.4 and Tomcat 6.
But i couldnt make it happened the page is displayed but the grid is unseen , why is that? what did i miss?
I thought that the problem is in the data retrieve (tought maybe it is impossible to retirve a static file (gaskets.json file) residing on the server , so i changed the line to:
var jsonStore = new dojo.data.ItemFileReadStore({ data: dataItems});
and put the json directly into the dataItems var , but it didnt help. needless to say that the original samplee running on the browser (no server involved) run perfectly.

What sm i doing wrong? thanks.
Pablo Srabstein says:

December 19, 2008 at 1:36 pm

Well , it looks like that my problem was solved by adding a:
grid.startup() right after the new …grid…() instantiation.
somehow this line was not required for the samples download from this blog (the samples are running with no server involved), i am sure there is an explanation for that , and will be happy if someone can explain those differences.
Thanks
Pablo.
Sarathi says:

December 20, 2008 at 9:04 am

Hi i got the following example code from http://docs.dojocampus.org/dijit/InlineEditBox.
I edited it alittlebit to get datas from my database using Php.Its working fine.But i want to make the edited changes should hit the database.How could i acheive it? can anyone help me…
———–***********———

Dojo example

@import “E:/Training codes/Referrence Materials/PHP/Sarathi PHP/DOJO Examples/dojo-release-1.2.3/dijit/themes/nihilo/nihilo.css”;

@import “E:/Training codes/Referrence Materials/PHP/Sarathi PHP/DOJO Examples/dojo-release-1.2.3/dijit/themes/nihilo/nihilo.css”;
@import “E:/Training codes/Referrence Materials/PHP/Sarathi PHP/DOJO Examples/dojo-release-1.2.3/dojox/grid/resources/nihiloGrid.css”;

dojo.require(”dojox.grid.DataGrid”);
dojo.require(”dojo.data.ItemFileWriteStore”);

This example shows, how to make the column “Type” editable.
In order to select a new value, you have to double click on the current value in the second column.

Country/Continent Name
Type

———–***********——–
John Baker says:

January 2, 2009 at 5:58 am

Hi,

Nice article, but I found it a little difficult to follow. Did I miss the links to some downloadable examples? Also, it would be nice to see a self contained (i.e. non-JSON) example. i.e. “Copy this markup and it’ll show you a table with three rows and four columns”. How do I achieve this?

I am glad to see the new grid makes life easier.

Thanks,

John
Maurizio says:

January 4, 2009 at 9:28 am

Having troubles with the latest downloaded version of the dojo toolkit (1.2.3) I also downloaded the tarball linked on this page. I found that the examples with the dojo toolkit in the tarball version (july ‘08 it seems) work well, instead the same source code doesn’t work with the latest. Just like what user @Patch wrote down in november ‘08… Why is it (still) so?
I work with FF 3.0.5 and IE 7.

Thanks for whatever answer. M.
SitePen Blog » New in JsonRestStore 1.3: Dates, Deleting, Conflict Handling, and more says:

January 27, 2009 at 1:39 pm

[...] Dojo Grid is designed to work with the Dojo Data API, so in order to leverage what we just learned about [...]
eiknarf says:

February 4, 2009 at 4:30 am

Hi,
I’m new to Dojo and as part of our framework were evaluating this framework, when I got into this dataGrid that needs to have a checkbox in the first column individually I got stuck because when I click an item checkbox it doest check and uncheck. Please, somebody help me on this. I am using a markup style. Below is my code:

<span jsid=”jsonStore” dojoType=”dojo.data.ItemFileReadStore” url=”/json/manage_users.json”>

Select
User Code
Email
First Name
Last Name
Company
Status
Date Registered
leela says:

February 5, 2009 at 2:36 am

Hi dear members…..!

How to navigate to tabs dynamically which second tab contains dojo grid(this tab should automatically refresh when we are moving to this tab).

can i get solution?

Thanks a lot!
Li
rathiika says:

February 26, 2009 at 6:29 am

Hi,

I am facing a strange issue with dojo grid. I have a dojo grid which is populating data showing in FF but no IE.

another grid(in some other page) data is visible in IE but not in FF.

will please provide any clues to come out of the issue.

I checked/compared all the code found no difference.

thanks in advance.
-rathika
E says:

March 2, 2009 at 9:42 am

Is there a way to get only one arrow when sorting a column instead of two arrows (one on either side of the column header)?
jdev123 says:

March 2, 2009 at 12:31 pm

Would like to chime in too that this does not work with the latest version (1.2.3) of Dojo.
jdev123 says:

March 2, 2009 at 12:47 pm

Thanks for the previous comment above, found out that there’s a wealth of examples in the tests directory. Look at this example on the current release.
Jeremy says:

March 4, 2009 at 4:11 pm

I have a DataGrid, and I am attempting to enable editing programatically. The idea is the fields are read-only until one clicks a button. Has anyone done this?
Raj says:

March 14, 2009 at 4:08 am

I am working with dojox grid, is it possiable to do align: ‘right’?

- feature : On header if text box provided to enter values for filter it will be very rich.

- One important draw back is store requires full data at one shot else we have to implement our own store.
Gary says:

March 23, 2009 at 9:37 am

Please forgive the lack of understanding of someone relatively inexperienced in JS !

I have a DataGrid defined declaratively, rather than programatically through JS, so I’ve no need to call fetch(). In that case, do I not have access to the ‘onComplete’ event so I can detect when the grid has finished loading ?

Would be really grateful if someone could point me in the right direction here, or provide a code snippet ?

Thanks.
Matthew says:

March 24, 2009 at 3:00 pm

Could you please, please, please update the examples to work with a release version of Dojo?
Rick O'shay says:

April 16, 2009 at 10:03 am

Not allowing onBeforeRow to be set declaratively on the grid’s structure object is a rather egregious omission. If there was a comprehensive documentation (e.g., Grid – Declarations – onBeforeRow: not supported) a lot of people would save a lot of time and frustration. Why for example, doesn’t this work?

<table type=”dojox.grid.DataGrid” ….
this.structure.onBeforeRow = MyOBR

It certainly connects the code from MyOBR but it sure doesn’t fire for every row. Why not?
Rick O'shay says:

April 16, 2009 at 10:05 am

Great, no html allows. Let me give the example again:

< table type=”dojox.grid.DataGrid” … more …
this.structure.onBeforeRow = MyFunc … more
Rick O'shay says:

April 16, 2009 at 10:06 am

phukit, I’m not entering in the tri-codes for brackets. the point is setting the onBeforeRow on the grid’s structure with a dojo/method assigns a method but doesn’t fire for each row.
Rick O'shay says:

April 16, 2009 at 10:42 am

onBeforeRow still exists? It’s part of the structure, right? So if this is the structure, where does it go? This will not work:

layout = [ onBeforeRow: myfunc, /* HUH? */
… }
Mike says:

April 17, 2009 at 2:16 am

Well, It seems that this sample can’t be run on dojotoolkit 1.3? at least with my firefox 3.1
or DataGrid in 1.3 is deprecated?
Ankit says:

May 14, 2009 at 8:22 am

Hi,

With respect to multiple header, why it is required to set the width of the first cell in the layout as “auto”. If i specify a constant, all column headers are blank. If “auto” is provided for the first cell, it works fine. But i need my own width..
Plz help

Ankit
Igor says:

May 19, 2009 at 3:05 am

Hi,
is there any way to change style of entire row. for example I don’t want row to be deleted just marked with red or text with style strike when i click on delete button.

Thanks
Igor
Mehmet Ali says:

May 30, 2009 at 4:55 am

hi,

I am using IBM JSR 286 portlet to RSA. I can using dojox DataGrid on the portlet. But I can’t paging on DataGrid. I want to use.

please help.
Struts2 and DOJO « Kuldeept’s Weblog says:

July 15, 2009 at 12:09 am

[...] See in details how Grids works (http://www.sitepen.com/blog/2008/07/14/dojo-12-grid/). [...]
Darren says:

August 16, 2009 at 9:18 am

Hi, anyone knows how to insert a row item at some specific index?
I did it with Grid in dojo 1.1.
But with 1.2 or later version, seems the new row can only be appended after the last row by “store.newItem(…)”

Anybody knows how to insert a row? Thank you!
Allan Jensen says:

September 14, 2009 at 4:07 am

Just wasted ton of time getting this to work in version 1.3 (or specifically 1.3.2 in my case). Right after the grid constructor you need to add:

grid.startup();

So the whole block becomes:

dojo.addOnLoad(function(){
var layout= [
{ field: "part_num", width: "auto", name: "Part Number" },
{ field: "min_temp", width: "100px", name: "Minimum Temperature" },
{ field: "max_temp", width: "100px", name: "Maximum Temperature" },
{ field: "type", width: "100px", name: "Type" },
{ field: "thick", width: "5em", name: "Thickness" }
];

grid = new dojox.grid.DataGrid({
query: { part_num: ‘*’ },
store: jsonStore,
structure: layout,
rowsPerPage: 20
}, ‘gridNode’);
grid.startup();
});

This was seemingly not necessary in version 1.2…
Sean Parsons says:

October 20, 2009 at 5:23 pm

Does anyone else see a problem when using soria theme, and rowspan=”2″ does not look right at all?
Vilas Deshmukh says:

November 16, 2009 at 8:09 pm

I am trying to use dijit.form.Textarea in dojox.grid.DataGrid. In FF3 it works fine. In IE7, it allows you to edit only one instance of dijit.form.Textarea. Other cells can still be edited, but you can edit only one cell of dijit.form.Textarea in IE7.

Does anyone have a solution to this?