Dojo 1.2 Grid July 14th, 2008 at 12:34 am 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');
 
var updateGasketTypes = function(){
	jsonStore.fetch({
		query: { part_num: '??1?' },
		onComplete: function(items, result){
			dojo.forEach(items, function(item){
				jsonStore.setValue(item, "type", 2);
			});
		}
	});
}

<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

David says:
Posted July 14th, 2008 at 1:54 pm

Very nice improvements. It seems like there are issues resizing the columns though. Also, when you sort by a column you end up with 2 up/down arrows for that column (not sure if that’s intentional).

DC says:
Posted July 14th, 2008 at 2:57 pm

Great work on the grid. How soon is “right around the corner” ??? I’m just about to start a LARGE programming project and I’m thinking Zend 1.6 integrated with Dojo 1.2 will be a very nice foundation to start from ;o)

Bryan Forbes says:
Posted July 14th, 2008 at 3:19 pm

@David: Thanks for catching those. We’ll look into those issues and get a fix in before 1.2.

@DC: Dojo 1.2 final is expected to be released by the end of this month.

dog bottom says:
Posted July 15th, 2008 at 3:31 pm

Big thing on grids is paging, and use with the queryreadstore. That required modification of the bridgy-thing (GridData?) to work right. Will you have a examples with QueryReadStore figured out by release?

Ajaxian » Dojo Grid Widget Updated. Data Integration and Editing Improvements. says:
Posted July 16th, 2008 at 6:00 am

[…] developers will be pleased to read about the recent update to the Dojo grid control. Version 1.2 of the grid control focuses primarily on improving integration with Dojo data stores, […]

dog bottom says:
Posted July 16th, 2008 at 10:15 am

RE: […] developers will be pleased to read about the recent update to the Dojo grid control. Version 1.2 of the grid control focuses primarily on improving integration with Dojo data stores, […]

It doesn’t answer the question of whether or not dojox.data.* stores will do the same. QRS wants augmentation like “what page are we on”, what is the initial page size, what are the subsequent page sizes, and communicate sort order to the server. This used to come from modifying GridData, now where does it come from?

Dojo grid update | Fomly says:
Posted July 16th, 2008 at 12:40 pm

[…] Link: Dojo 1.2 Grid […]

mavirroco says:
Posted July 16th, 2008 at 10:48 pm

Great work on the grid. i wondering its posible do an example for datagrid grouping like “categories” and “products”… bye

Trav says:
Posted July 17th, 2008 at 10:11 am

You may not be interested in Firefox 1 compatibility, but I like to use it to catch problems that may manifest in different ways later — point being, you may or may not consider this a bug:

http://www.sitepen.com/labs/code/grid/dojo_grid_1.2/dojo_data_1.html

Error: too much recursion
Source File: http://www.sitepen.com/labs/code/grid/dojo_grid_1.2/dojo/dojo.js
Line: 21

Nice work though. Projects like this are never done :)

Bryan Forbes says:
Posted July 17th, 2008 at 11:10 am

@dog bottom: The QueryReadStore is fully supported:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/data/demos/demo_QueryReadStore_grid.html

@mavirroco: That is a feature we plan on developing for 1.3.

@Trav: Dojo doesn’t support Firefox 1 anymore since Mozilla End-of-Life’ed it. I can’t reproduce the bug in Firefox 2 or 3.

Thomas says:
Posted July 17th, 2008 at 3:12 pm

I noticed that if you hit enter to save a value, the grid jumps all the way to the left in IE. This doesn’t happen in Firefox. This makes it hard to use for IE users on wide grids with a horizontal scroll bar.

Eric says:
Posted July 17th, 2008 at 3:37 pm

Looks great! One quirk I noticed with 1.1.1 that I noticed is still happening in 1.2 so far:

On the editing examples, expand the columns to force a horizontal scrollbar then edit a column when scrolled to the right. In IE7 once you hit enter to confirm your change the grid view jumps back to the left. This doesn’t happen in FF.

Thomas says:
Posted July 18th, 2008 at 2:12 pm

Eric and I chatted about this bug and didn’t sync up on who’d post this. Sorry for the double post ;-)

Vaibhav says:
Posted July 23rd, 2008 at 5:58 am

Hi Group,
Well i am using the DataGrid in one of my project> i am making this Grid programatically. I have added a div dom node in jsp and in my js function i am adding grid in this dom node. the code is below.

//Set the layout
var layout = [

{
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 }
]]
}
];

//Call the grid
var grid = new dojox.grid.Grid({
structure: layout

}, ‘gridNode’);

//Add to one of Div in My jsp page
//Here this.domNode is my div defined in jsp. This div
//is necessary to add as some more dom node is added to it
//so no suggest to remove this div

this.domNode.appendChild(grid.domNode);

Now the grid is not showing on the page. However when i see in the firebug the grid is there but its display property is none so hidden. Is this is the default property of Grid or what to do

Please help me.

Thanks in advance,

Regards
Vaibhav
vaibhav1407@gmail.com

Vinay Kannan says:
Posted July 23rd, 2008 at 6:26 am

Hey guys this is great stuff, i love your work, I am new to Dojo, so i’ve got an issue, not necessarily an issues, since I am new, just lack of knowledge maybe, but i want to know if theres any ways in which i could load dynamic data into a table using PHP and have the styling part done by Dojo, There is 1 project that I am working on right now, and I think this would be great stufff to give to my client.

Tom C says:
Posted July 29th, 2008 at 10:08 am

I don’t completely understand the implementation of your custom getter, getODtoID(). If you are dealing with data stores, then what exactly should grid.model return? It looks like you are using the read API (getValue) to access the value of item, so shouldn’t this call be made from the store, not the model?

Does grid.model return the data store?
Does whatever grid.model return also implement the read API?

Bryan Forbes says:
Posted July 31st, 2008 at 11:21 am

@Thomas and Eric: This is definitely a problem. I’ve filed a bug: http://bugs.dojotoolkit.org/ticket/7340 . This will be fixed by the time 1.2 is released. Thanks for pointing it out.

@Vaibhav: Once you add the grid to the dom, you’ll need to call the startup method (if you’re using a very recent trunk checkout… otherwise call render on it). This will make sure the grid is rendered.

@Vinay Kannan: It sounds like you need something like the QueryReadStore. This will load data dynamically from a server. Check out the demo I posted in an earlier comment.

@Tom C: You are correct, it should be grid.store instead of grid.model. We’ve since corrected the code snippet. Sorry for the confusion.

David D. says:
Posted August 4th, 2008 at 11:51 pm

Sounds like you have been busy. This is pretty good timing since you have changed the API as we are just about to kicjk off a project using the grid so we can use the new API now without worrying about conversion later.

Just a question on a wish list item. Have you any plans for providing a resequencing of columns e.g. drag column 2 in between column 3 and 4?

Dylan says:
Posted August 5th, 2008 at 5:18 am

@David: Yes, drag reordering of columns is also already supported in the Dojo 1.2 version of the grid.

John says:
Posted August 6th, 2008 at 11:23 am

Can anyone tell me where I can get the 1.2 build?

I can’t find it on the dojo site. Performance issues
with the 1.1.1 Grid are killing me and I’d like to
try out the 1.2 release.

Thanks,

John

Bryan Forbes says:
Posted August 6th, 2008 at 1:04 pm

@John: 1.2 hasn’t been released. It should be released sometime this fall. If you want to try out the new grid, you could either use a nightly build at http://archive.dojotoolkit.org/nightly/ or you could use subversion to check out (and stay up to date with) the latest trunk: http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/using-subversion

John says:
Posted August 7th, 2008 at 9:27 am

@Bryan: Thanks for the info. I have found your blogs very helpful in learning the Dojo grid. I am currently working on a project that is essentially a replacement for an excel application. The Dojo Grid works pretty well, but I have a few problems.

1. Dijit editor in combination with editorClass seems very flaky. I want to validate data types so that I don’t get errors on the server side. I find sometimes the editor boxes won’t allow you to type in them.

2. Modifications to a grid cell must be posted to the server and the grid refreshed. I perform all computations on the server side so that I can unit test them atomically. I find that this process is very slow and the Grid seems to collapse/expand every time a modification is posted to the server.

You seem to be one of the experts on the Dojo Grid so I was hoping if you could tell me if 1.2 will help with these issues? If not, do you have any recommendations? The app is going into production in September so I need to resolve these issues quickly.

Thanks again,

Jesse says:
Posted August 14th, 2008 at 8:29 am

These look like awesome improvements to the Grid. One thing I have been working on is a special-purpose calculator (like a mini spreadsheet) that displays numerical data in a dojox Grid and displays the standard deviation and other statistics about the data set. Previously I had been using the dojox.grid.data.Table model, which provided quick and easy access to the data. I’m wondering what the best alternative might be in 1.2 Grid? I’m going to try doing store.fetch() and rebuild a 2-dimensional array each time the store gets updated, but it seems like maybe there is a faster way.
I’ve also had some trouble getting summary rows to work (in 1.1.1 and svn-head), any direction on where I might learn more about that would be awesome.
Thanks a bunch!

Wade says:
Posted August 21st, 2008 at 12:56 pm

Will support be available to be able to Drag and Drop items from one Grid to another? I am investigating doing that now in 1.1.1 and it does not seem like it is possible.

Dojo newbie says:
Posted August 24th, 2008 at 9:27 am

Can I ask if you used a special build of Dojo for this project?

In FF your demo ‘only’ downloads 170K or so when tracked by Firebug, whereas when I try on my own Dojo install it takes 560K+

Jim says:
Posted August 26th, 2008 at 2:14 pm

Will the new grid support accessibility?

Lew says:
Posted September 3rd, 2008 at 9:23 am

Thanks so much for providing this example. The download is a huge help too. I tried using dojo_data_1.html sample code and it worked great! However, when I downloaded dojo-release-1.2.0b1-src.tar.gz and pointed it at that code it stopped working. The grid object appears, but without any data displayed.

ChriZ says:
Posted September 8th, 2008 at 4:05 am

Thanks for the example. But now i have still a proplem which i got in the first grid too. If i set a common Header and a sub header it´s repeating the Header on all rows.I just want the sub header to be displayed like this ==>
———————-
Common Header
———————-
Sub Header A | Sub Header B
———————-
Sub Header A | Sub Header B
———————-
Sub Header A | Sub Header B

Do i have to include another css or what did i wrong ??

Laca says:
Posted September 8th, 2008 at 7:56 am

I’ve used the grid (pre 1.2) with a QueryReadStore to display a large amount of records. I used a custom DojoData model overriding e.g. the getRowCount and requestRows methods to use with my server side paging and sorting.
Now with 1.2 I find that the basic fetch and sort are greatly simplified (which is great!), however, I cannot seem to get a way to dynamically specify the number of rows in the grid. Having checked the DataGrid and _Grid sources I can’t seem to find a way to specify it (e.g by overriding a method).
But without such a possibility I just cannot do server side paging, etc.
Is there a way to somehow provide the row count to the Grid?

Laca says:
Posted September 9th, 2008 at 3:53 am

Finally I think I found the answer to my previous question! At least I think I found it :-)
So if anyone is interested, here it is:

In QueryReadStore the function _xhrFetchHandler (the function that is called when the actual fetch -e.g. over the network- has retrieved the data) calls another function called _filterResponse with the data received. In QueryReadStore it simply retuns the data, but it can be overridden and so the data can be processed, before the store actually does anything with it.
_xhrFetchHandler then sets the total size of the dataset (stored in the _numRows field of the store) based on the numRows property of the data (or if there is no such property, then it is set to the actual size of the data received)! So if the numRows property is set to the total size of the data, then the store uses that information and the Grid will nicely page (I don’t use client paging) retrieving the data chunks as needed!

So one way to succeed is to create a _filterResponse function that sets the .numRows property of the data to the proper value.

In case of using JSON the solution can be even simpler! The remote server can simply add a numRows property to the JSON data returned, and it will be nicely used by the store$
So your JSON data can look something like:

{”items”:[{”Field1″:”Value1″,”Field2″:”Value2″}, {”Field1″:”Value21″,”Field2″:”Value22″}],”numRows”:77,”identifier”:”Field1″}

Dennis Samting says:
Posted September 9th, 2008 at 5:09 am

Hi everyone. I’m a newbie dojo user. If everyone don’t mind me asking:

“How can we populate a dojo grid from a ‘json’ object that is stored in a variable?”.

Thanks for any help in advance.

Alan Xing says:
Posted September 11th, 2008 at 11:36 am

Hello Bryan,

We are a big fan of dojo and the Grid here at StrongMail Systems. Our latest product is on dojo 1.1.1 and Grid 1.1. We will be pushing hard to get upgraded to dojo 1.2 and Grid 1.2 whenever they are ready.

Out of many cool Grid 1.2 features, the DND of rows is very highly desirable for us. This feature is tracked by the defect #4984 for dojo 1.2 milestone.

Could you confirm that this defect will be fixed as part of the dojo 1.2 milestone due on Sept 15th?

Great thanks!

coldfire22x says:
Posted September 11th, 2008 at 5:28 pm

Lew, I too have been having trouble getting the DataGrid up and running with 1.2.0b1 and just tested with 1.2.0b2. Same results (empty grid).

coldfire22x says:
Posted September 11th, 2008 at 5:55 pm

After some searching, I found the solution: http://docs.dojocampus.org/dojox/grid

Thanks to the authors for putting that together!

Laca says:
Posted September 13th, 2008 at 7:03 am

Dennis,

If I understand your question properly, you probably want to use ItemFileReadStore like:

data = { items: … your data …};

…

Hope this helps!

Laca says:
Posted September 13th, 2008 at 7:06 am

Hmm, it seems the most important part has somehow disappeared from my response …
Here it is again:

Laca says:
Posted September 13th, 2008 at 7:07 am

Again …

And in the body part define your store like:

dojoType=”dojo.data.ItemFileReadStore” jsId=”queryStore” data=”data”

Stephen D says:
Posted September 17th, 2008 at 2:54 pm

This is all great stuff, I’m eager to get my hands on the 1.2 and see what I can do. There is one thing however that I can’t seem to find any info about. I want a table where I can click on a row and have it reveal a div with more info about that row. Like, if you had a full tech spec on each gasket that you wanted to reveal when you clicked on a specific row.
Thanks,
Stephen

Hugo says:
Posted September 19th, 2008 at 10:19 am

hi, great post!. Im a newbie using dojo and I have entered into a project where use dojo release 1.1.1. Well, i need to use datagrid 1.2 in a accordion pane dinamically created.
The thing is, are the libraries compatible?? if not, what should i do?
Thanks …

Dylan says:
Posted September 19th, 2008 at 10:22 am

@Hugo: it should be pretty easy to upgrade from 1.1.1 to 1.2, see the release notes from today’s 1.2 RC1: http://dojotoolkit.org/book/dojo-1-2-release-notes

Alternatively, you can mix two versions of Dojo together, though it will load more JS code into your page. See the documentation for that at: http://dojotoolkit.org/book/book-dojo/part-3-javascript-programming-dojo-and-dijit/multiple-versions-dojo-page

Hugo says:
Posted September 22nd, 2008 at 8:10 am

Thanks Dylan, it works very well :). I have a doubt…
Is there any property or method for paging?

jcdecker says:
Posted September 22nd, 2008 at 12:55 pm

This Grid is much easier to set up! I am having troubles figuring out how to insert a Button object into a column, though. Any ideas?

Jon B says:
Posted September 23rd, 2008 at 12:04 pm

I have been able to create a DataGrid summary row using a secondary header and some obtuse logic to hide all but the last summary row.

onBeforeRow: function(dataIndex, row) {
var grid = dijit.byId(’gridNode’);
var rowcnt = grid.rowCount;
if ((dataIndex >= 0) && (dataIndex == rowcnt - 1)) {
row[1].hidden = false;
} else {
row[1].hidden = true;
}
},

Is it possible to create this datagrid summary row using the declarative approach with something like tfoot? If not, is this something that might be considered for a future release?

Also, can an onBeforeRow handler be bound when using the declarative approach?

Thanks, Jon

rvillane says:
Posted September 24th, 2008 at 7:03 am

Bryan

I’m trying to A) load some data using Grid 1.2 and B) after original data is loaded, try to filter out some rows. I’m running into issues with B) because after executing the following code the grid keeps the same original data.

grid.query = {part_num:”4001″};
grid.update();

Any suggestion how to filter data in the grid ?

rvillane says:
Posted September 24th, 2008 at 10:13 am

Ok, I was setting the new query in the wrong way. Using :

grd.setQuery({”part_num”:”4001″});

works using a dojo.data.ItemFileReadStore store, but if I try to use a dojox.data.QueryReadStore always displays the same data, no matter what query do I set.

Is this a known limitation ?

thanks

Vinod says:
Posted September 24th, 2008 at 11:07 pm

This is helpful for me. Can you give an example to grid with check box and its event

Vinod

rvillane says:
Posted September 25th, 2008 at 9:25 am

I”m running into issues with a TabContainer and multiple tabs (each tab is a ContentPanel) and each tab has a DataGrid, but only the DataGrid in the selected tab is displayed properly. Using firebug Inspect feature I realize the DataGrids are there, but are not displayed.

I tried creating the DataGrid using the declarative and programmatic approaches with the same result.

Any idea why Grid in non-selected tabs are not displayed properly ?

kyokku says:
Posted September 26th, 2008 at 12:59 pm

Hello, anybody have an example of paging?
I need to show only a few rows when user clicks on previous and next button.
Any help would be greatly appreciated.

Lance Spellman says:
Posted September 26th, 2008 at 3:16 pm

@Bryan, way back on July 17th.
You posted an example for the QueryReadStore which is now broken. I’m sure it may have worked back then.

I’m trying the 1.2rc1 tree and having the same problems in my code. It appears the Grid breaks in it’s create phase if the store is not specified, so the ability do grid.setStore in the addOnLoad is not working.

I haven’t tried with other stores, but it seems like this would be an issue for any grid-store combination where the store gets its data from a back-end source.

jcdecker says:
Posted September 29th, 2008 at 9:05 am

I love being able to define the grid in the body, instead of within javascript. The code looks and works much better. But…

I sure would love to make a field editable. I can’t find any examples of how to do this. I really need to implement a button to edit a line. I found code for v1.1.1 that works quite well.

I guess the real problem I’m having is there for both v1.1.1 and v1.2. That problem is that I just CAN’T find any documentation that describes what attributes and methods are available. If I define a GridTable in JavaScript, I can add editable: true. I tried editable=”true” within the , but that didn’t work. Does anyone out there have a clue on this?

sdg says:
Posted September 30th, 2008 at 10:04 am

hi,
is there an example how can i use the oncellclick method?

i am looking for this, but i didn’t found any example?

Rick O'Shay says:
Posted October 1st, 2008 at 10:07 am

It’s well known that pixel units are a disastrous choice in terms of formatting text, but most examples and books resort to this. I wish they wouldn’t. In this example, there is a mixture of pixels and em units, on the same grid. As screen resolutions continue to increase, pixels become more and more asinine, not that they ever made sense for text.

Dylan says:
Posted October 1st, 2008 at 11:44 am

@Rick: in a perfect world, yes. But CSS and ems are far from perfect in all situations… for example, text next to images… images don’t really work when set in ems, and CSS is far from great in terms of working well with layouts.

Tuan says:
Posted October 1st, 2008 at 1:30 pm

Thank you for the post. I am new to Dojo too and was wondering if there is a way to show X number of rows of a grid and not depend on the div height? Does anyone know?

Zladivliba says:
Posted October 5th, 2008 at 6:14 am

Can anyone drop a piece of code here explaining how it is possible to setup the grid with JsonService ; I have tryied but it seems to be impossible to do it

Release Notes zum Dojo Toolkit V1.2 - dojotoolkit-forum.de says:
Posted October 6th, 2008 at 12:05 pm

[…] auch die neue Grid Dokumentation und den Blog-Artikel für mehr […]

Nathan says:
Posted October 7th, 2008 at 9:32 am

I’ve been trying to get the gasket examples to work using the Dojo 1.2 official release, and had a fair number of difficulties….

So I eventuraly did a “diff” on the .css files in the dojox/grid/resources file in Bryan’s tarball and the .css files in the official 1.2 release dojox/grid/resources folder, and found quite a few significant differences.

The two biggest problems I’m having is that the new 1.2 does not include an uncompressed dojo.js (so I can’t zero in on my errors very easily), and that when I do get the grid to semi-display, a nice little “Sorry, an error occured” message shows up in the grid, but no errors in firebug! So….I’m frustrated :)

Bryan could you update your blog (or at least give me some pointers) to reflect the way your examples should work with the new 1.2 release?

Kyokku says:
Posted October 7th, 2008 at 10:18 am

Hi, I have a problem trying to insert a DataGrid into a AccordionPane programmatically, grid and pane are running well separately but this is what happens when I try to insert it:

var utilDiv = dojo.doc.createElement(”div”); //reference for the grid
utilDiv.setAttribute(”id”,”utilDiv”);

dojo.place( utilDiv, newResultPane.containerNode, 0 );
dojo.place( grid, utilDiv, 0); // and here is where it dies :´(

containerSeguimiento.addChild(newResultPane);//doesn’t add new pane
containerSeguimiento.startup();
containerSeguimiento.selectChild(newResultPane);

I get this error string in the Firefox errorConsole:
Error: [Exception… “Node cannot be inserted at the specified point in the hierarchy” code: “3″ nsresult: “0×80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)” location: “http://localhost:8080/DojoDataGrid/dojo/dojo/dojo.js Line: 21″]
Archivo de origen: http://localhost:8080/DojoDataGrid/dojo/dojo/dojo.js
Línea: 21

I’ve inserted other elements and they worked well but dataGrid…
What im doing wrong?

Bryan Forbes says:
Posted October 7th, 2008 at 2:52 pm

@John: Editors in the grid have changed from 1.1.1 to 1.2. Instead of editorClass, you now specify a cell type. I’ll be going over that in my next blog post which should be out this week. About the expanding/collapsing grid, you should check out the release of 1.2 since it’s out now. I think these issues have been fixed.

@Jesse: I’m not a dojo.data expert, but I would think you would want to use dojox.data.ItemFileWriteStore. Summary rows are a feature that we want to work on making really slick in the 1.3/1.4 release. Any feedback in Dojo’s Trac ( http://bugs.dojotoolkit.org ) would be helpful.

@Wade: There is basic support in the form of events that are defined on the grid, but we haven’t developed drag and drop between two grids yet. We plan on implementing it in the future.

@Dojo newbie: Yes, I used a special build. This file I used is here: http://www.sitepen.com/labs/code/grid/grid.profile.js

@Jim: Yes the grid will eventually be fully accessible. The next two releases should bring more a11y features.

@Lew: Since this was posted, we made the grid act more like a Dijit widget by requiring you to call .startup() on programmatic grids instead of .render() or .refresh().

@ChriZ: You want to define an onBeforeRow function for your view. There are a few examples of it in the grid test files. I’ll try to touch on it in my next post as well.

@Laca: rowsPerPage will specify how many rows should be fetched for each page of data.

@Dennis Samting: You would have to parse the JSON object into something that dojo.data.ItemFileReadStore could use. Once you’ve done that, pass that to ItemFileReadStore and use that as your store for the grid.

@Alan Xing: The basic hooks are there for DnD of grid rows, however it’s not very robust. We pushed back that issue to 1.3 so we could make sure it gets solved in a smart way.

@Stephen D: There are a few examples in the test files for the grid that show how to do that. test_expand.html and test_subgrid.html are the pertinent files. We’re working on a simpler way to do this for 1.3/1.4.

@jcdecker: If you just want a button element, you could set up the “get” function to return the markup for the button. If you want a widget button in there, there’s currently no easy way to do that. It’s something we’re looking into for 1.3/1.4. Regarding editable cells, my next post will include how to implement them.

@Jon B: For now, there is no way to set up an oBeforeRow handler using the declarative approach. The tfoot idea is a good one. We’ll keep it in mind when doing summary rows!

@rvillane: For your first problem, check out grid.filter(). That should work with QueryReadStore. The second problem is something I haven’t seen. I’ll have to look into that for the 1.2.1/1.3 release.

@Vinod: What would the checkbox be used for? We’re planning on adding checkbox selection in 1.3.

@kyokku: You get paging for free with the grid. Set rowsPerPage to the how many rows you want and then as you scroll through the grid, it automatically loads data as you need it. This provides for a much smoother interface.

@Lance Spellman: This was a known problem and has been fixed for the 1.2 release.

@sdg: How do you plan on using this event? I could touch on that in my next post if I knew how you wanted to use it.

@Tuan: Yes, there is: set the autoHeight property to the number of rows you want to show.

@Zladivliba: Have you looked at the test_yahoo_search.html test included with the grid? It uses dojox.rpc.Service and dojox.data.ServiceStore to populate the grid based on a search.

@Nathan: I should have another blog post up by the end of the week. Stay tuned!

Bryan Forbes says:
Posted October 7th, 2008 at 2:56 pm

@Kyokku: I see one problem: you’re using grid instead of grid.domNode in your call to dojo.place(). I think that might cause the error your seeing.

Kyokku says:
Posted October 7th, 2008 at 5:24 pm

Thanks a lot Bryan, I had been working on this for days. About paging… bosses don’t like scrolls because “the grid needs to show a lot of rows (sometimes more than 20K)” ¬¬, even if paging makes slower the user interface, so they want to do it with native ajax xhr and buttons next and previous for pages. :(

Will be good if people of dojoland makes something like.
Thanks again for reply.
P.D. Sorry for bad english, im just learning. =p

Marc Rhodes says:
Posted October 8th, 2008 at 9:17 am

The tarball mentioned in this post, , contains a complete copy of dojo. The demo works fine with this copy of dojo.

If I replace that dojo with the official release dojo 1.2 the demo does not work anymore. The frame appears but the table is blank. I tried both the packed and src versions and got the same results.

Bryan Forbes says:
Posted October 8th, 2008 at 2:23 pm

@Kyokku: Currently, the grid doesn’t support paging as you describe it. Perhaps we can come up with something like this for the 1.3/1.4 release.

@Marc Rhodes: Some of the API for the grid changed between this blog post and the 1.2 release. I’m writing a new blog post with an updated tarball to be published on Friday. Stay tuned!

Marc Rhodes says:
Posted October 9th, 2008 at 4:04 am

Bryan, I am also having trouble including a grid in a contentPane loaded with setHref. Page appears fine when loaded directly, errors when loaded into a contentPane with setHref.

Dunno if there might be something simple worth mentioning about this usage. Or if it’s too far off-topic maybe a subject for another post?

Lance Spellman says:
Posted October 9th, 2008 at 5:20 am

What has onBeforeRow event been replaced with in grid 1.2? I’d like to implement the subgrid functionality from the 1.1 tests, test_subgrid.html, but with 1.2 DataGrid and QueryReadStore.

It looks like grid/_View.js now has a generateCellMarkup function that doesn’t have onBeforeRow anymore like _grid/Builder.js had with its generateHtml function.

Any hints on how to proceed?

Lance Spellman says:
Posted October 9th, 2008 at 5:22 am

I guess, more specifically, what’s the best way to do subgrids with the new 1.2 grid? Are there examples out there?

Bryan Forbes says:
Posted October 9th, 2008 at 8:44 am

@Marc Rhodes: I’ve never tried using the grid like that in a ContentPane. I’ll check it out and see what I can come up with. Perhaps you’ve found a bug :).

@Lance Spellman: onBeforeRow still exists. For subgrid examples, check out test_expand.html and test_subgrid.html in the grid tests.

Marc Rhodes says:
Posted October 9th, 2008 at 12:05 pm

Bryan, I was able to get the grid working in the ContentPane using the markup approach but I have not got it working with the programmatic approach. This may be due to a more general problem of not understanding how to do addOnLoad when loading into a ContentPane with setHref.

Lance Spellman says:
Posted October 9th, 2008 at 12:34 pm

Thanks Bryan, you’re correct. I should have updated earlier when I discovered I was looking in the wrong place.

I’ve worked through that and I’m trying to come up with a way that when the getDetail function is called it goes back to the data store and queries for the child entries of that entry.

I have flexibility in setting up the data for the store, but I’m trying work through what that would be so that when the subgrid is instantiated, I can set a store and a query for the store to be something like query:{currentEntry.children: ‘*’}

Not exactly sure how I need to structure the JSON data for the store, and then what the query would be to set the subgrid store correctly.

Any help here appreciated. TIA, Lance

Lance Spellman says:
Posted October 10th, 2008 at 9:05 am

Update. I have everything working to the point where grid row clicked creates subGrid. Subgrid is connected to a QueryReadStore and gets the data.

But the subgrid doesn’t dislpay. There’s a flicker on the screen where the grid temporarily expands, then it collapses back with a tiny row (about 2px) below the row that should have expanded to a subgrid.

Firebug shows that there is a subgrid, but no headers or data. Console.debug shows that subgrid object does in fact exist, has the right number of rows, has a datastore connected to it with the correct data.

This is similar to the problem described in the forums of subGridProps having a “get”:getDetailData that wasn’t firing and therefore subGrid not displaying.

Suggestions? Should I post in grid forum?

Erick2red says:
Posted October 10th, 2008 at 3:02 pm

@Marc Rhodes: Bryan, I was able to get the grid working in the ContentPane using the markup approach

i’m triyng to make it work inside a ContentPane setting href attr, but not happens, i got an error:
“Error parsing in _ContentSetter#Setter_setter_1 TypeError: n is undefined message=n is undefined”
and my page loaded by href use a markup defined grid, i create the tab and set href programmatically

Lance Spellman says:
Posted October 11th, 2008 at 5:24 am

Eureka!

Got it. For anyone else working through this, if you’re modeling after the test_subgrid.html file and you are working with a DataGrid that has a store, I found you needed to go to the buildSubgrid function and replace the line subgrid.render() with subgrid.startup().

Shows up fine then. That was a nice 8 hr kill.

After I get things cleaned up I will post a link to a working example in the forum.

Erick2red says:
Posted October 11th, 2008 at 1:40 pm

@Bryan Forbes: i like to check your new post, cuz i’m having trouble catching onchange events from a bool cell editor, so i wanna know…

rdunklau says:
Posted October 13th, 2008 at 3:08 am

Hello.

I’m looking for a way to insert rows in this new DataGrid. The fact is, i know how to add one at the end of the displayed rows, but i can’t figure how to insert a new one. Could you help me ?

Thanks

Marc Rhodes says:
Posted October 13th, 2008 at 4:18 am

@Erick2red: the error you are getting comes from html.js. Maybe it is trying to parse the page you want to load. Does the page you are trying to setHref work okay when you display it standalone?

Erick2red says:
Posted October 15th, 2008 at 8:26 am

@Marc Rhodes, thanxs that was the trouble, i found it myself, but cost me like 8 hours…thanxs anyway, now killing time putting a bool cell editor to work.
some useful tips?

JbL says:
Posted October 16th, 2008 at 10:52 pm

Is there a way to allow the column widths to float naturally based on their content, like a simple HTML table? When I omit the width attributes on each column in the layout, every column gets the same default width. When I use ‘auto’ as the width in every column, it does the same — all columns are the same size.

I’m creating the grid and layout programmatically, like this:

var layout = [
{ field: ‘id’, name: ‘ID’, width: ‘40px’ },
{ field: ‘name’, name: ‘Name’, width: ‘auto’ },
{ field: ‘number’, name: ‘Number’, width: ‘60px’ }
];
var grid = new dojox.grid.DataGrid({
query: { id: ‘*’ },
store: jsonStore,
autoHeight: 5,
structure: layout
}, document.createElement(’div’));

Dan says:
Posted October 19th, 2008 at 9:36 am

I have been using YUI for a while, but from what I have seen, dojo seems cleaner. However, how would I populate the v1.2 grid using a javascript array. I don’t always want to use ajax.

Have you ported your previous grid tutorials to use the new version of the grid?

Thanks.

Ivan says:
Posted October 20th, 2008 at 5:25 am

Thanks for all the info!

Any news about that updated blog post?

I spent the whole weekend stupidly trying to put together something using code from your example, all the time thinking I was doing something wrong since the grid wouldn’t display. But now I see that your example won’t work with the official release.

An update would be greatly appreciated.

Thanks and regards,

I.-

Ivan says:
Posted October 20th, 2008 at 6:11 am

Disregard my previous message!

I’ve been able to fix my code by reading http://docs.dojocampus.org/dojox/grid

Thanks again for all the hard work!

Regards,

John says:
Posted October 20th, 2008 at 6:26 am

The 1.2 Grid is a huge improvement over 1.1.1. I prefer to define my grid in markup rather than javascript as it seems much cleaner to me.

I was wondering if anyone has been able to get the widgetClass (defined in markup) to work with a custom build. The following column works fine with the release build, but not with a custom build. When I try this, I see _28.split is not a function in the firebug console. Any help would be greatly appreciated

Transaction Date

Nathan says:
Posted October 20th, 2008 at 6:53 am

Bryan,

How’s that new blog post coming? I’ve been working on some other stuff, but sure would like to return to my grid work and get it nailed down properly (properly being the way you say I should do it :) )

Thanks!
Nathan

John says:
Posted October 20th, 2008 at 7:33 am

I found the solution to the widgetClass not working in the custom build. If you patch the source per this URL it will work.

http://trac.dojotoolkit.org/ticket/7829

SitePen Blog » New Features in Dojo Grid 1.2 says:
Posted October 22nd, 2008 at 11:11 am

[…] last article about the Dojo Grid focused on what has changed when creating a grid using Dojo 1.2. In this […]

Patch says:
Posted October 28th, 2008 at 4:02 pm

I downloaded your example source files and used the dojo 1.2 I downloaded from the dojo website. The grid only seems to work with the dojo you have in the example tarball.

It would seem a running problem with dojo that anything built with a specific version is not backwards compatible with any other version.

I’ve been looking for a proper ajax solution to an application I’m going to build.

fancyplants says:
Posted October 29th, 2008 at 10:26 am

I have had the same problem as Patch above - I have downloaded dojo v1.2 and tried to use the new DataGrid using my own details in json format with a slight modification to the code above.

The DataGrid seems to be created, but it is not visible on the screen and the ItemFileReadStore._jsonData is null. Any ideas?

Some code (abridged)
========================================================
the jsp page:

@import “http://o.aolcdn.com/dojo/1.2.0/dijit/themes/tundra/tundra.css”;
@import “http://o.aolcdn.com/dojo/1.2.0/dojox/grid/resources/Grid.css”;
@import “http://o.aolcdn.com/dojo/1.2.0/dojox/grid/resources/tundraGrid.css”;
@import “http://o.aolcdn.com/dojo/1.2.0/general.css”;

/* NOTE: for a full screen layout, must set body size equal to the viewport. */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

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

var jsonStore = new dojo.data.ItemFileReadStore({ url: “/appts_desktop/appointments_desktop/fetch/static.json” });
var grid = null;

dojo.addOnLoad(function(){
var layout= [
{ field: “provider_type”, width: “80px”, name: “Type” },
{ field: “provider”, width: “auto”, name: “Service Provider” },
{ field: “service”, width: “auto”, name: “Service” },
{ field: “last_used”, width: “80px”, name: “Last Used” },
{ field: “rating”, width: “20px”, name: “Rating” }
];

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

…..

You are here: Choose Service -> Add Details -> Select Date and Time -> Confirm

From Favourites:

========================================================
static.json:

{
identifier: ‘provider_type’,
label: ‘provider_type’,
items: [
{ id: 1, provider_type: ‘hairdressers’, provider: ‘Short Cuts’, service: ‘Cut and Blow Dry’, last_used: ‘12/10/2008′, rating: 3 },
{ id: 2, provider_type: ‘car_servicing’, provider: ‘Bobs Wheels’, service: ‘MOT’, last_used: ‘12/10/2008′, rating: 4 },
{ id: 3, provider_type: ‘car_servicing’, provider: ‘Bobs Wheels’, service: ‘Full Service and Checkup’, last_used: ‘12/10/2008′, rating: 5 },
{ id: 4, provider_type: ‘restaurants’, provider: ‘Ricos’, service: ‘Evening Meal’, last_used: ‘12/10/2008′, rating: 4 }
]}

Any help would be much appreciated, thanks.

» Dojo’s Grid with Filters says:
Posted October 29th, 2008 at 2:13 pm

[…] of a model and instead it directly references the datasource with the Grid. There’s a good article at Site Pen that will get you going with the basics of the new Grid. […]

Sharoon says:
Posted October 29th, 2008 at 5:28 pm

Hi,

Is it possible to have some of the rows in the Grid as non-editable and some as editable?

Any help would be appreciated.

fancyplants says:
Posted October 30th, 2008 at 3:10 am

Hi,
I’ve managed to get the table to sort of appear by taking it out of the LayoutContainer, (the json data was invalid in my original post which didnt help) but it only displays the titles, and the width of the widget goes off the right side of the screen. When I go into firebug and change the height manually then sort one of the columns the data appears.
I’m guessing this is because its nested in divs and tables, but why should this be? I can do a sort of botchy bugfix by adding the following:
doj

Categories

Archives

Search