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

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