onCellUpdated and sending updates back to the server

[judah]

I'm having a bit of confusion about posting data back from the editable grid to my server.

I undestand that updating any of the cells fires the onCellUpdated event and it also updates the XMLDocument in the Document Model. However, I'm having difficulty figuring out the proper way to grab the updated data and post it back to the server.

I'm creating a Data Model with a schema like so:

var schema = {
                tagName: 'contact',
                id: 'id',
                fields: ['first_name', 'last_name', 'phone_home', 'phone_mobile', 'email']
            };
            dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
            dataModel.setDefaultSort(colModel, 1, "DESC");
    		
    		grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
    		grid.render();
    		
    		dataModel.load('/loadContacts.cfm'); 
        }

This loads up the xml for my grid and displays the grid just fine. Now I want to save changes back to the db (saveContacts.cfm or some such). I think I just need a decent example of adding the listener in the proper place and doing an asynchronous post back.

Also, what would be best practice here, sending back the xml tree on every change or just sending back a single contact record? I would assume that it would be better to send back a single record, but I'm not sure how I would do that in this case.

Thanks in advance and kudos to Jack for putting together some awesome code that is teaching me a lot.

[jack.slocum]

In my setup, I add a save button to the toolbar to save changes and post the xml document with edits back to the server. In some instances this may not be the best solution.

You can also do incremental saving as you hinted. The main issue here is manually implementing a buffer so every edit of every cell isn't causing an http call. Do it right can be rather involved.

Here's an example of what a saving routine might look like. It assumes dataModel is in scope and you have two functions handleSuccess and handleFailure to notify the user.

function onSaveClick(e){
     var xml = dataModel.getDocument();
     var cb = {success: handleSuccess, failure: handleFailure}
     YAHOO.util.Connect.asyncRequest('POST', 'save.php', cb, xml); 
}

[Animal]

The way I update the server on significant events is using DWR.

If you have a Java backend, I highly recommend it.

I save column hide/resize events using DWR. I also have a custom DataModel and ColumnModel which pull their data using DWR.

http://getahead.ltd.uk/dwr/

[cgp]

An even better way would probably be to update the dataset when the "cursor" is moved via cursorChange. (just set some flag to know when data for that row had changed)