Dojo 1.2 Grid

July 14th, 2008 – by Bryan Forbes

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

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

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

Logical File Layout

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

Dojo Data Integration

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

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

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

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

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

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

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

var updateGasketTypes = function(){
	jsonStore.fetch({
		query: { part_num: '??1?' },
		onComplete: function(items, result){
			dojo.forEach(items, function(item){
				jsonStore.setValue(item, "type", 2);
			});
		}
	});
}

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:




Part Number
Minimum Temperature
Maximum Temperature
Type
Thickness

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:






Part Number
Minimum Temperature
Maximum Temperature
Type
Thickness

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:




Part Number
Minimum Temperature
Maximum Temperature
Type


Thickness

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




Part Number

				Minimum Temperature
			

				Maximum Temperature
			
Type
Thickness
OD to ID

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:




Part Number
Minimum Temperature
Maximum Temperature
Type
Thickness

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!

168 Responses to “Dojo 1.2 Grid”

David says:

July 14, 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:

July 14, 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:

July 14, 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:

July 15, 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:

July 16, 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:

July 16, 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:

July 16, 2008 at 12:40 pm

[...] Link: Dojo 1.2 Grid [...]
mavirroco says:

July 16, 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:

July 17, 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:

July 17, 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:

July 17, 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:

July 17, 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:

July 18, 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:

July 23, 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:

July 23, 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:

July 29, 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:

July 31, 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:

August 4, 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:

August 5, 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:

August 6, 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:

August 6, 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:

August 7, 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,

John
Jesse says:

August 14, 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:

August 21, 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:

August 24, 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:

August 26, 2008 at 2:14 pm

Will the new grid support accessibility?
Lew says:

September 3, 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:

September 8, 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:

September 8, 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:

September 9, 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:

September 9, 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:

September 11, 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:

September 11, 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:

September 11, 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:

September 13, 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:

September 13, 2008 at 7:06 am

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

September 13, 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:

September 17, 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:

September 19, 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:

September 19, 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:

September 22, 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:

September 22, 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:

September 23, 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:

September 24, 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:

September 24, 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:

September 24, 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:

September 25, 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:

September 26, 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:

September 26, 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:

September 29, 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?