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:
dojo.addOnLoad( function() {
document.getElementById( ‘gridNode’ ).style.width=”530px”;
document.getElementById( ‘gridNode’ ).style.height=”250px”;
});
(Putting width and height as style values in the element doesn’t work by the way)
But why won’t it size correctly anyway? Anyone have any ideas?

philou says:
Posted October 31st, 2008 at 11:29 am

Problem:
Filling a dojox.data.DataGrid by retrieving the data via ajax request and sending an update back to the server via ajax when the data in the grid is edited.

Hi,
the above states my problem pretty well. I have searched the web up and down and I haven’t been able to even get a glimpse of how to achieve this, so I’d like to ask you for a hint, please.

I am filling a grid as you showed in your tutorial above, except that I don’t load a file, but send a request to a php script which returns the data:

var jsonStore = new dojo.data.ItemFileWriteStore({ url: “http://www.myserver.com/return_json_data.php” });

This works very well to fill the grid and if I change a value in the grid, this value is updated in the java jsonStore data store, as I can see with Firebug.

Now I would like to communicate this data change back to my server. Using your setup above, lets say I have changed the “maximum temperature” to “2500″ for part number “4005″. How do I trigger this:

http://www.myserver.com/receive_data_update.php?action=update&part_number=4005&max_temp=2500

Could this even be done by sending this via POST?

Many thanks ind advance,
philou

Jeremy Zerr says:
Posted November 2nd, 2008 at 1:53 pm

@philou

Before you do a jsonStore.save, why not just do an inspection of the jsonStore to see which items have modified using the isDirty() method. Then, when you determine what has been modified, send a HTTP POST request to update the server with that modified info. Just use the Dojo xhrGet or xhrPost, see the functions detailed here: http://api.dojotoolkit.org/

Here is some sample code swiped from the book of Dojo on how to find if an item has been modified in a jsonStore.

Code borrowed from the Write API documentation:
http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/dojo-data-design-and-apis/write

//Instantiate some write implementing store.
var store = some.DataWriteStore();
//Set our load completed hander up…
var onCompleteFetch = function(items, request) {
// Process the items test for modification
for (int i = 0; i < items.length(); i++){
var item = items[i];
if (store.isDirty(item){
alert(”Item with label: ” + store.getLabel(item) + ” is dirty.”);
}
}
}

//Define a fetch error handler, just in case.
var onFetchError = function(error, request){
alert(”Fetch failed. ” + error);
}

// Fetch some data… All items, in fact (no query should return everything)
store.fetch({onComplete: onCompleteFetch});

Jeremy Zerr
http://www.zerrtech.com

Laca says:
Posted November 3rd, 2008 at 12:36 am

I think what you want to do is to override the _saveCustom function of ItemFileWriteStore.
_saveCustom is called whenever the save method of the store is called AND there are not yet committed changes (inserts, deletes, updates) to the store. So ItemFileWriteStore does some of the work for you automatically.

Here is how I do it. I am using JSON, but of course you can do whatever you prefer, it is just that you need your own formatting method (if it is needed) instead of my _getItemJSONString function:


        // Custom ItemFileWriterStore that supports add/remove/modify to my app

        dojo.declare("CustomItemFileWriteStore", dojo.data.ItemFileWriteStore, {
                _saveCustom: function(saveCompleteCallback, saveFailedCallback){

                        //  xhrPost/xhrPut your data back to your server (convert it to the server format first if need be)

                        // 'this' keyword refers to the ItemFileWriteStore instance being extended

                        var success = true;

                        if(this.isDirty()) {

                            if(!this._isEmpty(this._pending._newItems)) {

                                success = this._postToApp("insert", this._pending._newItems);

                            }

                            if(success && !this._isEmpty(this._pending._deletedItems)) {

                                success = this._postToApp("delete", this._pending._deletedItems);

                            }

                            if(success && !this._isEmpty(this._pending._modifiedItems)) {

                                var modifications = [];

                                for(identity in this._pending._modifiedItems){

                                    // find the modified items as this._pending._modifiedItems contains the

                                    // ORIGINAL values because the Grid must show the modified items, but

                                    // we need to send the modifications to Neat

                                    if(this._itemsByIdentity){

                                        modifications[identity] = this._itemsByIdentity[identity];

                                    }else{

                                        modifications[identity] = this._arrayOfAllItems[identity];

                                    }

                                }

                                success = this._postToApp("update", modifications);

                            }

                        }

                        if(success) {

                            saveCompleteCallback();

                        }

                        else {

                            saveFailedCallback();

                        }

                },
			    _getItemJSONString: function(itemArr){

			        var serializableStructure = {};
			        var identifierAttribute = this._getIdentifierAttribute();

			        if(identifierAttribute !== Number){

			            serializableStructure.identifier = identifierAttribute;

			        }

			        if(this._labelAttr){

			            serializableStructure.label = this._labelAttr;

			        }

			        serializableStructure.items = [];

			        for(var i = 0; i < itemArr.length; ++i){

			            var item = itemArr[i];

			            if(item !== null){

			                var serializableItem = {};

			                for(var key in item){

			                    if(key !== this._storeRefPropName && key !== this._itemNumPropName){

			                        var attribute = key;

                                    // var valueArray = this.getValues(item, attribute);

                                    var valueArray = item[attribute] || [];

			                        if(valueArray.length == 1){

			                            serializableItem[attribute] = this._flatten(valueArray[0]);

			                        }else{

			                            var serializableArray = [];

			                            for(var j = 0; j < valueArray.length; ++j){

			                                serializableArray.push(this._flatten(valueArray[j]));

			                                serializableItem[attribute] = serializableArray;

			                            }

			                        }

			                    }

			                }

			                serializableStructure.items.push(serializableItem);

			            }

			        }

			        var prettyPrint = false;

			        return dojo.toJson(serializableStructure, prettyPrint);

			    },

_postToApp: function(operation, postItems) { var identity; var postItemsArr = []; for(identity in postItems){ postItemsArr.push(postItems[identity]); } var serverURL = "appURL" + "?" + operation; return dojo.rawXhrPost({ preventCache: true, url: serverURL , handleAs: "text", postData: "items=" + this._getItemJSONString(postItemsArr), // dojo.toJson(postItems), sync: true, timeout: 10000, load: function(response, ioArgs) { // The LOAD function will be called on a successful response. console.error("Response: ", response); return true; }, error: function(response, ioArgs) { // The ERROR function will be called in an error case. alert("HTTP status code: ", ioArgs.xhr.status); return false; } }); } });

Cheers,

Laca

Laca says:
Posted November 3rd, 2008 at 12:43 am

You may want to simply override the _saveCustom method of ItemFileWriteStore to save your changes on your server. That method is called automatically, whenever the save method of the store is called and there are uncommitted changes to the store.
ItemFileWriteStore does this automatically for you.

Here is my method of doing the updates (insert, delete, update) using JSON data:

dojo.declare("CustomItemFileWriteStore", dojo.data.ItemFileWriteStore, {


                _saveCustom: function(saveCompleteCallback, saveFailedCallback){

                        //  xhrPost/xhrPut your data back to your server (convert it to the server format first if need be)

                        // 'this' keyword refers to the ItemFileWriteStore instance being extended

                        var success = true;

                        if(this.isDirty()) {

                            if(!this._isEmpty(this._pending._newItems)) {

                                success = this._postToApp("insert", this._pending._newItems);

                            }

                            if(success && !this._isEmpty(this._pending._deletedItems)) {

                                success = this._postToApp("delete", this._pending._deletedItems);

                            }

                            if(success && !this._isEmpty(this._pending._modifiedItems)) {

                                var modifications = [];

                                for(identity in this._pending._modifiedItems){

                                    // find the modified items as this._pending._modifiedItems contains the

                                    // ORIGINAL values because the Grid must show the modified items, but

                                    // we need to send the modifications to App

                                    if(this._itemsByIdentity){

                                        modifications[identity] = this._itemsByIdentity[identity];

                                    }else{

                                        modifications[identity] = this._arrayOfAllItems[identity];

                                    }

                                }

                                success = this._postToApp("update", modifications);

                            }

                        }

                        if(success) {

                            saveCompleteCallback();

                        }

                        else {

                            saveFailedCallback();

                        }

                },
			    _getItemJSONString: function(itemArr){

			        var serializableStructure = {};
			        var identifierAttribute = this._getIdentifierAttribute();

			        if(identifierAttribute !== Number){

			            serializableStructure.identifier = identifierAttribute;

			        }

			        if(this._labelAttr){

			            serializableStructure.label = this._labelAttr;

			        }

			        serializableStructure.items = [];

			        for(var i = 0; i < itemArr.length; ++i){

			            var item = itemArr[i];

			            if(item !== null){

			                var serializableItem = {};

			                for(var key in item){

			                    if(key !== this._storeRefPropName && key !== this._itemNumPropName){

			                        var attribute = key;

                                    // var valueArray = this.getValues(item, attribute);

                                    var valueArray = item[attribute] || [];

			                        if(valueArray.length == 1){

			                            serializableItem[attribute] = this._flatten(valueArray[0]);

			                        }else{

			                            var serializableArray = [];

			                            for(var j = 0; j < valueArray.length; ++j){

			                                serializableArray.push(this._flatten(valueArray[j]));

			                                serializableItem[attribute] = serializableArray;

			                            }

			                        }

			                    }

			                }

			                serializableStructure.items.push(serializableItem);

			            }

			        }

			        var prettyPrint = false;

			        return dojo.toJson(serializableStructure, prettyPrint);

			    },

_postToApp: function(operation, postItems) { var identity; var postItemsArr = []; for(identity in postItems){ postItemsArr.push(postItems[identity]); } var serverURL = "myURL" + "?" + operation; return dojo.rawXhrPost({ preventCache: true, url: serverURL , handleAs: "text", postData: "items=" + this._getItemJSONString(postItemsArr), // dojo.toJson(postItems), sync: true, timeout: 10000, load: function(response, ioArgs) { // The LOAD function will be called on a successful response. console.error("Response: ", response); return true; }, error: function(response, ioArgs) { // The ERROR function will be called in an error case. alert("HTTP status code: ", ioArgs.xhr.status); return false; } }); } });

Replace “myURL” to your URL. If you don’t use JSON, then you need your own formatting function instead of my _getItemJSONString!

Gregg says:
Posted November 3rd, 2008 at 10:54 am

dojox.GridRowView - Is here a replacement for this when using the new grid?

Patch says:
Posted November 3rd, 2008 at 2:58 pm

My question still hasn’t been answered, the example above does not work with the current 1.2 release, I’ve changed nothing in the source code I see no errors. I use web dev toolbar to make sure all includes are included.

To repeat the problem goto
http://download.dojotoolkit.org/
download either the latest stable or release
and replace the dojo dojox and dijit directories in the example
http://www.sitepen.com/labs/code/grid/dojo_grid_1.2.tar.gz
with the release ones, it breaks.

Any idea why?

Dylan says:
Posted November 3rd, 2008 at 3:26 pm

@Patch:

1.2.0 had a couple of regressions that are being fixed in 1.2.1. That release is imminent (as in expected this week).

philou says:
Posted November 4th, 2008 at 3:39 pm

@Jeremy Zerr
@Laca

Thanks for your suggestions. I have actually not followed exactly what you suggested, but you have put me on the right track!! For the sake of discussion, let me share my approach.

I have looked for another event which I could hi-jack in order to do the ajax request and I have decided on the doApplyCellEdit function inside the dojox.grid.DataGrid class, which I have subclassed in order to achieve this. When the doApplyCellEdit function is called nothing has been written to the store yet, so I don’t have to do a lot of checking to see if the store has changed. My main reason is that I don’t really understand the store all that well, so I rather not mess with it. Plus, the code is pretty short - see below ;-)

The only two things I still don’t get:
1. Getting a handle to the item in the store in order to see if the value has changed seems very odd, is there a better way??
2. Ideally I would not want to write changes to the store, if the ajax update failed for some reason, but if I put the code to update the store into the “ajax success” part of the script, the store is not updated on success. If anybody can tell me how/why I would be very thankful! (the non-working code is commented out).

Here’s what I did:
dojo.declare("custom.dojox.grid.DataGrid", dojox.grid.DataGrid, { doApplyCellEdit : function(inValue, inRowIndex, inAttrName) { var dbID = this._by_idx[inRowIndex].idty;


// thsi seems to be to be a very odd way to get to the "currItem" of the store. Is there something better?

		var itemFound = function(item, request) {

			if (item) {

				return currItem = item;

			} else {

				return null;

			}

		};
		this.store.fetchItemByIdentity( {

			identity :this._by_idx[inRowIndex].idty,

			onItem :itemFound

		});
		var oldValue = this.store.getValue(currItem, inAttrName);
		//alert('CellEdit Row: ' + inRowIndex + '  Store ID: ' + dbID + ' Column: ' +inAttrName + '  old Value: ' + oldValue + '  new Value: ' + inValue );
	if (oldValue != inValue) { // if nothing changed don't do ajax

		if (true) { //check for all ok

			var ajaxUrl = 'receive_data_update.php?action=update&part_number=' + dbID + '&column=' + inAttrName + '&value=' + inValue;

			dojo.xhrGet( {

				url :ajaxUrl,

				handleAs :"text",

				handle : function(data, args) {

							if (typeof data == "error") {

								console.warn("error!");

								console.log(args);

							} else {

								if ('OK' == data) { // the php ajax script returns "OK" on sucess

									alert('ajax ok');

// I would prefer to do the store update below at this point here in the script but it's not working

		//							dojo.hitch(this, function(currItem) {

		//								this.store.setValue(currItem, inAttrName, inValue);

		//								this.onApplyCellEdit(inValue, inRowIndex, inAttrName);

		//							});

								}

							}

						}

			});

		}

	}

this.store.fetchItemByIdentity( { identity :this._by_idx[inRowIndex].idty, onItem :dojo.hitch(this, function(item) { this.store.setValue(item, inAttrName, inValue); this.onApplyCellEdit(inValue, inRowIndex, inAttrName); }) }); } });

philou says:
Posted November 4th, 2008 at 3:41 pm

sorry if this is posted twice, but I don’t see my post…?!

Laca says:
Posted November 5th, 2008 at 6:42 am

Isn’t the getItem(idx) method of DataGrid that you can use to get the actual value?
So doesn’t something like this work:
var oldValue = this.store.getValue(getItem(inRowIndex), inAttrName);
?
I have to admit that I am not a JS programmer, so I usually do everything doing “trial-and-error” :-)

Nevertheless, I dare to say :-) that your value setting does not work because that code is not called!
In ItemFileReadStore the fetchItemByIdentity is like (omitting the part which is executed when the store is not loaded yet):

// Already loaded. We can just look it up and call back. var item = this._getItemByIdentity(keywordArgs.identity); if(keywordArgs.onItem){ var scope = keywordArgs.scope?keywordArgs.scope:dojo.global; keywordArgs.onItem.call(scope, item); }

So I assume that the function you define in dojo.hitch() is called by this line:
keywordArgs.onItem.call(scope, item);

So maybe you should do something like:

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); }) });

But as I said I don’t really know JS, so I might have misunderstood things! You’ve been warned :-)

Jason says:
Posted November 5th, 2008 at 12:41 pm

Do you know if it is possible to not only highlight the entire row when hovering over a cell but the column as well - i.e. crosshairs (ex. http://www.johnhancockfreedom529.com/public/site/performance/daily )

philou says:
Posted November 5th, 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:
Posted November 7th, 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:
Posted November 7th, 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:
Posted November 8th, 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:
Posted November 9th, 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:
Posted November 13th, 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:
Posted November 13th, 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:
Posted November 13th, 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.

Jens says:
Posted November 14th, 2008 at 10:37 am

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

Thanks
Jens

Jochen says:
Posted November 20th, 2008 at 7:45 am

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

Nima says:
Posted November 20th, 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:
Posted November 21st, 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:
Posted November 21st, 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:
Posted November 27th, 2008 at 9:15 am

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:
Posted November 27th, 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:
Posted December 1st, 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:
Posted December 10th, 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:
Posted December 17th, 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:
Posted December 18th, 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:
Posted December 19th, 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:
Posted December 20th, 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:
Posted January 2nd, 2009 at 5:58 am

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.

Maurizio says:
Posted January 4th, 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:
Posted January 27th, 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:
Posted February 4th, 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:

Select
User Code
Email
First Name
Last Name
Company
Status
Date Registered

leela says:
Posted February 5th, 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:
Posted February 26th, 2009 at 6:29 am

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:
Posted March 2nd, 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:
Posted March 2nd, 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:
Posted March 2nd, 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:
Posted March 4th, 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:
Posted March 14th, 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:
Posted March 23rd, 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 ?

Matthew says:
Posted March 24th, 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:
Posted April 16th, 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:
Posted April 16th, 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:
Posted April 16th, 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:
Posted April 16th, 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:
Posted April 17th, 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:
Posted May 14th, 2009 at 8:22 am

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:
Posted May 19th, 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:
Posted May 30th, 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.

Categories

Archives

Search