How do I handle dojo datagrid cell updates so I can post them back automatically to the server?

Question

I am using dojo datagrid to display my data. When the end user edit the cell values it should be updated in the server using ajax calls(when the focus goes out of the cell).

Else, I should have a Edit & update/cancel buttons for each row to handle the same feature. But I don know how to place edit & update buttons inside the grid and capture their events.

By default dojo updates only local the store value(client side). how can I save the updated cell values into the server?

do we need to write any override methods to do so??

I am new to dojo. Any detailed explanation or sample codes would be much appreciated.

Could anyone lend a hand to solve this issue??

Thank you

Regards, Raj

Answer 1

This isn't a very detailed explanation but yes you should override the method that handles user data entries as I don't see an event for this. So basically create a new class that inherits from the data grid, find the method in the source code that handles the editing and override it to give it an extra action to post it back to the server. You'll want to call the datagrid's default action in that method too.

Some information here (that you probably are already aware of):

http://docs.dojocampus.org/dojox/grid/DataGrid#editing-data

I've extended Dojo's default components before, it's not hard. I find that it's always good to examine the Dojo source and to just be careful when upgrading Dojo to make sure new versions don't break existing features.

Answer 2

To be able to push the updates server-side, you've to override _saveCustom() or _saveEverything(). Here is a piece of code (a bit cleaned-up) I'm using to persist an update.

Note that the code below relies on the private _getModifiedItems() because the DataGrid accepts inline editions. If you do know the list of modified items (because the edition is done in a popup and you keep the item key somewhere), retreiving the modified item is simpler.

module.submitUpdates = function() {
    var store = <from a variable local to the module>
    if (store.isDirty() confirm("Updates to be persisted. Continue?")) {
        store._saveCustom = function(saveCompleteCallback, saveFailedCallback) {
            var modifiedItem = _getModifiedItems(store)[0];
            dojo.xhrPost( {
                headers: { "content-type": "application/json; charset=utf-8" },
                content: dojo.toJson(modifiedItem),
                handleAs: "json",
                load: function(response) {
                    if (response !== null && response.success) {
                        saveCompleteCallback();
                    }
                    else {
                        saveFailedCallback(response);
                    }
                },
                error: saveFailedCallback,
                url: "/API/<Object>"
            });
        };
        store.save( {
            onComplete : function() {
                module.loadCachingRuleList();
            },
            onError : function(errorData, request) {
                _reportUpdateFailure(errorData, errMsg);
            }
        });
    }
};

Here is the code I use to get all updated items when the user is about to loose an updated DataGrid (because he leaves the page or because he wants to refresh the grid content).

Note that the following code was using Dojo 1.3. I haven't check if it's easier with Dojo 1.4... I hope that dojo.Stateful that's going to be introduced in Dojo 1.5 will simplify it, otherwise we'll have to wait for Dojo 1.6 ;)

var _getModifiedItems = function(store) {
    var modifiedItems = [];
    if (store !== null && store._pending !== null) {
        if (store._pending._modifiedItems !== null) {
            for (var modifiedItemKey in store._pending._modifiedItems) {
                if (store._itemsByIdentity) {
                    modifiedItems.push(store._itemsByIdentity[modifiedItemKey]);
                }
                else {
                    modifiedItems.push(store._arrayOfAllItems[modifiedItemKey]);
                }
            }
        }
        if (store._pending._newItems !== null) {
            for (var modifiedItemKey in store._pending._newItems) {
                if (store._itemsByIdentity) {
                    modifiedItems.push(store._itemsByIdentity[modifiedItemKey]);
                }
                else {
                    modifiedItems.push(store._arrayOfAllItems[modifiedItemKey]);
                }
            }
        }
    }
    return modifiedItems;
};

var _getDeletedItems = function(store) {
    var deletedItems = [];
    if (store !== null && store._pending !== null && store._pending._deletedItems !== null) {
        for (var deletedItemKey in store._pending._deletedItems) {
            if (store._itemsByIdentity) {
                deletedItems.push(store._itemsByIdentity[deletedItemKey]);
            }
            else {
                deletedItems.push(store._arrayOfAllItems[deletedItemKey]);
            }
        }
    }
    return deletedItems;
};

I hope this helps, A+, Dom