View Full Version : JSON Grid Example Please

21 Nov 2006, 5:02 AM
Can we get an example for a JSON grid similar to the plants XML one? I've never used JSON and can't really work out how to get the data in that way.

I assume its easier for me to work with JSON, because I want to modify the dataset, then commit changes to the database.

21 Nov 2006, 6:26 AM
XML is easier for editing and saving to the database since it maintains you xml document for you. JSON is more lightweight and faster, but you will have to track the changes yourself.

There has to be a few posts in here related to using json data that have example code in them provided by other people.

22 Nov 2006, 11:42 AM
How do I get the XML data out of the model to save it? I can only see load functions.

Also, how would you recommend tracking changes in the dataset? I would like a more optimised solution rather than just deleting everything and inserting what is in the dataset.

My application will add rows to the dataset (insert with mysql), edit and remove rows (update/delete in mysql).

22 Nov 2006, 12:20 PM
You could add a hidden column to your DM/CM that tracks whether a row has changed. Add a listener for the 'cellupdated' event and in that method, set the col value to true for the row. Then at some point, say 'Save' button click, you would look at each row of the grid's data object and only send the rows flagged as true to your update process.

This is a fairly simple implementation - you could track changes to the cell level rather than row level if you wanted to get more granular with your updates.

22 Nov 2006, 12:31 PM
Hey Tim,

Curious how you'd handle deletes... remove the row from the grid DOM tree but keep it hidden somewhere (maybe good if 'undo' is required)? Cache deleted row ids in an external array to process on save?

22 Nov 2006, 12:33 PM
How do you get the information out of the DM ?

Use the each method ?

22 Nov 2006, 12:40 PM
I haven't actually implemented delete. Rather than removing the DOM node, you might just change the row visibility via CSS and flag the row as 'deleted' (Either as a hidden col or an external array). I would think if you remove the DOM node you might have to re-render the entire grid, which probably would be bad.

You could use the each method to invoke some function, or just iterate over the data collection manually.

22 Nov 2006, 1:27 PM
Just call delete on the data model, it will:

a) delete the node from the xml document.

b) delete just that node from the grid (no reload).

To get the working XML document, you can call getDocument() on the data model. Note: each load replaces the old document so if you need to do something with it use the "beforeload" event.

You can save the xml document by calling YAHOO.util.Connect.asyncRequest and passing the XML document directly as the data parameter.

22 Nov 2006, 1:47 PM
So I would need the each method to take advantage of information I've added to the model.

Otherwise I send the XMLDocument via an asynchronous request and compare to the original?

22 Nov 2006, 3:33 PM
There are a variety of ways you could do it, but yes, that would be one way.

Another way is to listen for update/delete events on the data model and create queue of modification messages. You can then send these in batch when the user hits a save button button, or send them constantly while they edit.

Personally, I would use the 1st json approach as it's more scalable.