Have Geek Brain

How do I handle updates to dojo datagrid cells so that I can send them to the server automatically?

I am using dojo datagrid to display my data. When the end user edits the cell values, it has to be updated on the server with ajax calls (when the focus is out of the cell).

Also, I need to have Edit and update / cancel buttons for each line to handle the same function. But I don't know how to place the edit and update buttons inside the grid and capture their events.

By default, dojo only updates the local store value (client side). How to save updated cell values ​​on the server?

Do I need to write any override methods?

I am new to dojo. Any detailed explanation or code examples would be much appreciated.

Can anyone help with this issue?

thanks

Regards, Raj

+2


a source to share


3 answers


To be able to redirect updates to the server, you must override _saveCustom()

or _saveEverything()

. Here is the (slightly cleaned up) code snippet I use to save the update.

Please note that the code below depends on the private _getModifiedItems()

one because the DataGrid accepts inline releases. If you know the list of changed items (because the edition is done in the popup and you are storing the item key somewhere) then returning the changed item is easier.

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 the updated items when the user is about to lose the updated DataGrid (because they leave the page or because they want to update the contents of the grid).



Note that the following code used Dojo 1.3. I haven't tested if this is easier with Dojo 1.4 ... I hope dojo. The statistic that will be introduced in Dojo 1.5 simplifies 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;
};

Hope this helps, A +, Dom

+4


a source


This is not a very detailed explanation, but yes, you should override the method that handles the user data records 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 your source code that handles the edit and overrides it to give it an extra action to send it back to the server. You will also want to call the default datagrid action in this method.

Some info here (which you probably already know about):



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

I've previously extended the default Dojo components, it's not hard. I find it always helpful to look into the Dojo source and just be careful when updating Dojo so that new versions don't break existing functionality.

+1


a source


To avoid the dojo library hack, simply switch to the YUI2 datasheet; it is a cell editor accepts an asyncsubmitter function that submits your changes to your segment This description is from the documentation

asyncSubmitter

Function

A developer-defined function that can pass an input value to the server. This function must accept fnCallback and oNewValue arguments. When the view is complete, the function must also call fnCallback (bSuccess, oNewValue) to complete the save to CellEditor. This function can also be used to perform additional validation or process input values. YUI2DataTable

+1


a source






More articles:


All Articles