Dojo 1.2 Grid

By on July 14, 2008 12:34 am
NOTE: This article is out of date.
Read about the new dgrid for something fresh!

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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

[Live Example]

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!

Comments

  • David

    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

    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)

  • @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

    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?

  • Pingback: Ajaxian » Dojo Grid Widget Updated. Data Integration and Editing Improvements.()

  • dog bottom

    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?

  • Pingback: Dojo grid update | Fomly()

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

  • 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 :)

  • @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

    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

    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

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

  • Vaibhav

    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

    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

    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?

  • @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.

    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?

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

  • 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

  • @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

  • @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

    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

    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

    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

    Will the new grid support accessibility?

  • Lew

    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

    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

    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

    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

    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.

  • 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

    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

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

    Thanks to the authors for putting that together!

  • Laca

    Dennis,

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

    data = { items: … your data …};

    Hope this helps!

  • Laca

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

  • Laca

    Again …

    And in the body part define your store like:

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

  • Stephen D

    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

    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 …

  • @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

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

  • jcdecker

    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

    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

    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

    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

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

    Vinod

  • rvillane

    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

    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.

  • @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

    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

    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

    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.

  • @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

    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?

  • 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

  • Pingback: Release Notes zum Dojo Toolkit V1.2 - dojotoolkit-forum.de()

  • 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

    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: “0x80530003 (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?

  • @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!

  • @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

    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

    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.

  • @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

    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?

  • 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?

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

  • @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

    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.

  • 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

  • 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

    @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

  • 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

    @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…

  • 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

    @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

    @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

    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

    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

    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

    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,

    I.-

  • 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

    Thanks,

    John

  • 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

  • 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

  • Pingback: SitePen Blog » New Features in Dojo Grid 1.2()

  • 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.

  • 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.

  • Pingback: » Dojo’s Grid with Filters()

  • Sharoon

    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.

    Thanks

  • 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

    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

  • @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

    @philou

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

    Hope this helps!

    Cheers,

    Laca

  • Laca

    @philou

    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!

    Hope this helps!

    Cheers,

    Laca

  • Gregg

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

  • 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?

  • @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

    @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

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

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

  • Laca

    @philou

    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 :-)

    Cheers,

    Laca

  • Jason

    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 )

    Thanks

  • philou

    @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

    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.

  • 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

    @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

  • 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

    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

  • @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

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

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

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

    Thanks.

  • Jens

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

    Thanks
    Jens

  • Jochen

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

    Thanks.

  • Nima

    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

    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

    @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

    Hi,

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

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

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

  • Aveesh

    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

    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

    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

    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

    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

    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

    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

    ———–***********——–

  • Hi,

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

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

    Thanks,

    John

  • Maurizio

    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.

  • Pingback: SitePen Blog » New in JsonRestStore 1.3: Dates, Deleting, Conflict Handling, and more()

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

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

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

  • 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

    Hi,

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

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

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

    I checked/compared all the code found no difference.

    thanks in advance.
    -rathika

  • E

    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

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

  • jdev123

    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

    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

    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

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

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

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

    Thanks.

  • Matthew

    Could you please, please, please update the examples to work with a release version of Dojo?

  • Rick O’shay

    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

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

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

  • Rick O’shay

    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

    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

    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

    Hi,

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

    Ankit

  • Igor

    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

    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.

  • Pingback: Struts2 and DOJO « Kuldeept’s Weblog()

  • Darren

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

    Anybody knows how to insert a row? Thank you!

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

    grid.startup();

    So the whole block becomes:

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

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

    This was seemingly not necessary in version 1.2…

  • Sean Parsons

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

  • Vilas Deshmukh

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

    Does anyone have a solution to this?

  • Mat

    Hi guys!
    I love the DataGrid but how do I deselect a row???
    I have a datagrid with ‘selectionMode=single’ and I want to be able to deselect currently selected row. How do I do that?
    Mat

  • Nagsen

    I am working on dojo enhanced grid, is there way to validate input field of grid before submit the page..I put form validation but the problem is when focus from grid is gone its not validating properly.

  • Daniel

    Hi Guys
    I was wondering how can i stretch grid to fit a dynamically resized div ?
    Same as * in td width of regualr table object.

    thx

  • Tarun

    Hi, I m trying to anchor my header row(as shown in grids here), but it scrolls with the data row in my case. Are there any css changes that are required.?????I am using dojo1.2.3 and Nihilo theme.

  • Wes

    I second David’s question above. The only way I can find to reset the grid is to set a query for an impossible value. Since I’m using a dojox.data.QueryReadStore, this causes unnecessary calls back to the server.

  • AB

    what is wrong with this code ?
    dojo.addOnLoad(function() {
    // our test data store for this example:
    var store4 = new dojo.data.ItemFileReadStore({ identifier: “Title”, label: “Title”, items:[{ Title:”ABCD”, Year:”2010″, Producer:”UTT”}]});
    //new dojox.data.CsvStore({ url: “TEST.csv” });
    // set the layout structure:
    var layout4 = [{
    field: “Title”,
    name: “Title of Movie”,
    width: “200px”
    },
    {
    field: “Year”,
    name: “Year”,
    width: “50px”
    },
    {
    field: “Producer”,
    name: “Producer”,
    width: “auto”
    }];

    // create a new grid:
    var grid4 = new dojox.grid.DataGrid({
    query: {Title: ‘*’},
    store: store4,
    rowsPerPage: 10,
    //rowSelector: ’20px’,
    structure: layout4
    },
    document.createElement(‘div’));

    // append the new grid to the div “gridContainer4”:
    dojo.byId(“gridContainer4”).appendChild(grid4.domNode);

    // Call startup, in order to render the grid:
    grid4.startup();
    });

  • Mike

    Is there any reason that this would work as a local file with the DOJO/DIJIT files etc from the tarball.
    However when I use my DOJO or reference the Google CDN dojo then I get no data. Firebug does not even show me attempting to reference the JSON file.

    The only change is changing the reference for dojo to;

    or

  • @Mike The two likely possibilities: cross-domain issues/paths/references, or not putting the logic of your work inside a dojo.ready or dojo.addOnLoad block. That said, it should be possible to get it working with the CDN.

  • Mike

    Thanks Dylan, re-structured the flow and its all working.

    One additional question – is it possible to have a dynamic rowSpan type functionality, basically a grouping row in column 1.

    I.e. Column 1 = Month, columns 2/ = “Support Requests” / “owner”

    Not sure I explained that very well.

    Mike

  • David

    Silly question…where can i find gasket.json and general.css?

  • Hi
    I am new to Dojo. I copied the page source code from the DojoGrid 1.2 Layouts and Markup example. I made changes to the @import so that it points to ajax.googleapis. I downloaded the gaskets.json and put it in a local directory and addressed it in the ItemFileReadStore url: statement. It is just showing an empty page. I made sure that I did not make any syntax errors or typos. Any idea what is going wrong? no change to the code apart from using googleapis location. is this the correct way to learn how to use the grid.
    I appreciate your help
    Thanks

  • Buck Powell

    I have fields based on values in dropdowns. I want to populate those field names in my grid dynamically each time I select different fields. How can I do that?
    Exising Code:
    gridLayout = [
    {
    cells: [
    {name: ‘Form No’, field: ‘formno’, width: “60px”, headerStyles:”text-align:center;”},
    {name: ‘CATCD5’, field: ‘catcd5’, width: “55px”, headerStyles:”text-align:center;”},
    {name: ‘From Field’, field: $(“#optFrom”).val(), width: “50px”, headerStyles:”text-align:center;”},
    {name: “X”, field: “selected”, width: “20px”, headerStyles:”text-align:center;”, formatter: formatRowCheckbox},
    {name: ‘To Field’, field: $(“#optTo”).val(), width: “50px”, headerStyles:”text-align:center;”},
    {name: ‘Long Description’, field: ‘long_desc’, width: “277px”, headerStyles:”text-align:left;”}
    ]
    }
    ]
    Doesnt work

  • Has almost the same problem as Raad, copy everything to my own location but grid doesn’t work. What I’m doing wrong …

    http://devnull.samersoff.net/statme/index_003.html

  • Hi

    I despair to find an answer on HOW TO Save Modified values of the datagrid.

    I’m displaying a datagrid of book’s stock listing of an association, and the people have to enter the number of book’s sells during a period of time.

    I would like to be able to store in ajax mode any entrance in the datagrid by sending an ajax request.

    I found some save method that should exist, some apply too, but none producing a ajax request, I can’t find a tutorial explaining how to dynamicly save the data of a datagrid in a database from an ajax request.

    Pls, help with tutorial, link, suggestion, source code anything that can explain it clearly.

    Best regards

    David

  • Viktor

    @AB: The answer is:


    dojo.addOnLoad(function() {
    // our test data store for this example:

    var obj = { identifier: "Title", label: "Title", items: [{Title:"ABCD", Year:"2010", Producer:"UTT"}] };
    var store4 = new dojo.data.ItemFileReadStore( {'data': obj } );

    //new dojox.data.CsvStore({ url: "TEST.csv" });
    // set the layout structure:
    var layout4 = [{
    field: "Title",
    name: "Title of Movie",
    width: "200px"
    },
    {
    field: "Year",
    name: "Year",
    width: "50px"
    },
    {
    field: "Producer",
    name: "Producer",
    width: "auto"
    }];

    // create a new grid:
    var grid4 = new dojox.grid.DataGrid({
    query: {Title: '*'},
    store: store4,
    rowsPerPage: 10,
    //rowSelector: '20px',
    structure: layout4
    }, 'gridContainer');

    grid4.startup();
    });

  • Viktor

    @Raad Mohammed

    I made two code changes that allowed me to use dojo 1.5 from http://ajax.googleapis.com
    1. Moved jsonStore initialization inside dojo.addOnLoad(function() {
    2. Added grid.startup() at the end of this function.

  • francisco

    what about getting data from a mySql table?? how do I do that…. ??

  • abigail

    Data within the grid is extracted for printing but until the whole data grid is scrolled till the end of the data and available in the grid the print page does not display the data…how can I overcome this problem?
    Only the data available after the page loads is available for printing. Thank you for your time.

  • Tania

    @ Buck Powell
    based on values in dropdowns I want to populate those field names in my grid dynamically each time I select different fields, where one field will be updated from database and other s from json file. Please suggest how i can do this. I am using dojo 1.5

  • Sankaranarayanan

    Hi,
    I have a scenario where i need to group the cells alone (not for the headers).

    eg…
    A A1 1
    A A2 2
    A A3 3
    A A4 4
    B B1 1
    B B2 2
    B B3 3
    B B4 4

    In the above table, instead of having 4 A’s and 4 B’s in the first column, can we merge them in to a single cell ? Something like…

    A1 1
    A A2 2
    A3 3
    A4 4

    B1 1
    B B2 2
    B3 3

    But the thing is the number of records per group may vary… ( 10 records for A and 5 records for B like)

    Thanks in advance..

    Regards,
    Sankaranarayanan Ekambaranathan.

  • Rajkumar

    ho to get tree data from json in dojo

  • Shijas Muhammed

    I would like to create a grid with multiple header, I need the to design multiple lines only in header part. Not at data part.. Can any one help me..