Opened 10 years ago

Closed 8 years ago

#8719 closed defect (worksforme)

unable to edit a cell in the dojox.grid.DataGrid with dojox.grid.cells.Editor as the cell type

Reported by: cfleisch Owned by: Bryan Forbes
Priority: high Milestone: 1.6
Component: DojoX Grid Version: 1.2.0
Keywords: datagrid, dojox.grid.cells.Editor Cc: liucougar
Blocked By: Blocking:

Description (last modified by Adam Peller)

I am using dojo 1.2.0 (and the same problem occurs with 1.2.3), and am trying to configure a DataGrid? so that the "editable" cells are of type dijit.Editor, for example:

var layout= [
                                { field: "part_num", width: "auto", name: "Part Number" },
                                { field: "min_temp", width: "100px", name: "Minimum Temperature" },
                                { field: "max_temp", width: "100px", name: "Maximum Temperature" },
                                { field: "type", width: "auto", name: "Type", editable: true,
                    type: dojox.grid.cells.Editor },
                                { field: "thick", width: "5em", name: "Thickness" }
                        ];

                        grid = new dojox.grid.DataGrid({
                                query: { part_num: '*' },
                                store: jsonStore,
                                structure: layout,
                                rowsPerPage: 20
                        }, 'gridNode');

Firstly, is there a way to turn off the toolbar in 1.2.x? I have tried "editorToolbar: true" as was used in 1.1.x as an attribute of the cell to no avail.


I have noticed in FF3, IE7 and Safari 3 that after you click on an adjacent cell to finish editing and update the cell, clicking on the cell directly below to update the next row, it seems to not be editable, when clicking on the adjacent cell to update the second cell, it inserts the text from the first cell... so,

Editable Cell 1, turns in to the dijit.Editor, type in text, ALL GOOD Click on the adjacent cell, cell is updated. I then click on an editable cell directly below the first cell (AS ABOVE). I cannot enter in text, but notice thefollowing: I click on the adjacent cell, and cell is updated, but updated from the previous update (as in CELL 1 above)..

I then repeat the steps clicking on the cell again, this time i get to edit the cell, and after clicking on the adjacent cell, all works... however clicking on CELL 3, I fall in to the same problem as above with Cell 2.

After googling, I found that we add to override the following method, "onApplyCellEdit", so:

dojo.connect(grid, "onApplyCellEdit", dojo.partial(onApplyCellEditHandler, grid)); in the addOnLoad method.

and then;

function onApplyCellEditHandler(inGrid, inValue, inRowIndex, inFieldIndex) {
            jsonStore.save();
            inGrid.updateRow(inRowIndex);
}

but I still have the same problem as above, has anyone come across this?

Your help is greatly appreciated... I have noticed that the inline editor (although its a single line text input value) works, keeping the original cell value, and entering in to edit mode appropriately, just the Editor doesn't work properly.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title>DataGrid Notification</title>
        <style type="text/css">
                @import "../dojo-release-1.2.3/dijit/themes/tundra/tundra.css";
                @import "../dojo-release-1.2.3/dojox/grid/resources/Grid.css";
                @import "../dojo-release-1.2.3/dojox/grid/resources/tundraGrid.css";
                @import "general.css";
        </style>
        <script type="text/javascript" src="../dojo-release-1.2.3/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
        <script type="text/javascript">
                dojo.require("dojo.data.ItemFileWriteStore");
                dojo.require("dojox.grid.DataGrid");
        dojo.require("dijit.Editor");
        dojo.require("dojox.grid.cells.dijit");

                var grid = null;

        var dbname = "TEST_TBL";

        //var jsonStore = new dojo.data.ItemFileWriteStore({ url: "/database/DBAdministration?select&database=" + dbname });
        var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });

                dojo.addOnLoad(function() {
                        var layout= [
                                { field: "part_num", width: "auto", name: "Part Number" },
                                { field: "min_temp", width: "100px", name: "Minimum Temperature" },
                                { field: "max_temp", width: "100px", name: "Maximum Temperature" },
                                { field: "type", width: "auto", name: "Type", editable: true,
                    type: dojox.grid.cells.Editor },
                                { field: "thick", width: "5em", name: "Thickness" }
                        ];

                        grid = new dojox.grid.DataGrid({
                                query: { part_num: '*' },
                                store: jsonStore,
                                structure: layout,
                                rowsPerPage: 20
                        }, 'gridNode');

            grid.startup();

            dojo.connect(grid, "onApplyCellEdit", dojo.partial(onApplyCellEditHandler, grid));

            jsonStore._saveCustom = function(saveCompleteCallback, saveFailedCallback) {
                alert('Running _saveCustom event script!');
                updateServer(saveCompleteCallback, saveFailedCallback);
            };
                });

        function onApplyCellEditHandler(inGrid, inValue, inRowIndex, inFieldIndex) {
            jsonStore.save();
            inGrid.updateRow(inRowIndex);
        }

        function updateServer(saveCompleteCallback, saveFailedCallback) {
            // xhrPost/xhrPut your data back to your server (convert it to the server format first if need be)
            // 'this' keyword refers to the ItemFileWriteStore instance being extended
            var success = true;

            if(jsonStore.isDirty()) {
                if(!jsonStore._isEmpty(jsonStore._pending._newItems)) {
                    console.log("insert called");
                    success = this._postToApp(dbname, "insert", jsonStore._pending._newItems);
                }

                if(success && !jsonStore._isEmpty(jsonStore._pending._deletedItems)) {
                    console.log("delete called");
                    success = this._postToApp(dbname, "delete", jsonStore._pending._deletedItems);
                }

                if(success && !jsonStore._isEmpty(jsonStore._pending._modifiedItems)) {
                    var modifications = [];

                    for (identity in jsonStore._pending._modifiedItems){
                        // find the modified items as jsonStore._pending._modifiedItems contains the
                        // ORIGINAL values because the Grid must show the modified items, but
                        // we need to send the modifications to Neat
                        if (jsonStore._itemsByIdentity){
                            modifications[identity] = jsonStore._itemsByIdentity[identity];
                        } else {
                            modifications[identity] = jsonStore._arrayOfAllItems[identity];
                        }
                    }

                    console.log("update called");
                    success = this._postToApp(dbname, "update", modifications);
                }
            }

            if(success) {
                console.log("a success");
                saveCompleteCallback();
            } else {
                console.log("an error");
                saveFailedCallback();
            }
        }


        function getItemJSONString(itemArr) {
            var serializableStructure = {};

            var identifierAttribute = jsonStore._getIdentifierAttribute();

            if (identifierAttribute !== Number) {
                serializableStructure.identifier = identifierAttribute;
            }

            if (jsonStore._labelAttr) {
                serializableStructure.label = jsonStore._labelAttr;
            }

            serializableStructure.items = [];

            for (var i = 0; i < itemArr.length; ++i) {
                var item = itemArr[i];

                if (item !== null) {
                    var serializableItem = {};

                    for(var key in item) {
                        if (key !== jsonStore._storeRefPropName && key !== jsonStore._itemNumPropName) {
                            var attribute = key;

                            // var valueArray = jsonStore.getValues(item, attribute);
                            var valueArray = item[attribute] || [];

                            if (valueArray.length == 1) {
                                serializableItem[attribute] = jsonStore._flatten(valueArray[0]);
                            } else {
                                var serializableArray = [];

                                for (var j = 0; j < valueArray.length; ++j) {
                                    serializableArray.push(jsonStore._flatten(valueArray[j]));
                                    serializableItem[attribute] = serializableArray;
                                }
                            }
                        }
                    }

                    serializableStructure.items.push(serializableItem);
                }
            }
            var prettyPrint = false;
            return dojo.toJson(serializableStructure, prettyPrint);
        }


        function _postToApp(dbname, operation, postItems) {
            console.log("calling the server");

            var identity;
            var postItemsArr = [];

            for (identity in postItems) {
                postItemsArr.push(postItems[identity]);
            }

            var serverURL = "/database/DBAdministration?" + operation +
                "&database=" + dbname;

            console.log("items=" + getItemJSONString(postItemsArr));
           
            return dojo.rawXhrPost({
                preventCache: true,
                url: serverURL ,

                handleAs: "text",
                postData: "items=" + getItemJSONString(postItemsArr), // dojo.toJson(postItems),
                sync: true,
                timeout: 10000,

                load: function(response, ioArgs) { // The LOAD function will be called on a successful response.
                    console.error("Response: ", response);
                    return true;
                },

                error: function(response, ioArgs) { // The ERROR function will be called in an error case.
                    alert("HTTP status code: ", ioArgs.xhr.status);
                    return false;
                }
            });
        }

        function save() {
            jsonStore.save();
        }

        function add() {
            var myNewItem = {part_num: "REPLACE TEXT", min_temp: "1.1", max_temp: "1", type: "1", thick: "1"};
            // Insert the new item into the store:
            // (we use store3 from the example above in this example)
            jsonStore.newItem(myNewItem); //myNewItem);
           
            save();
        }

        function del() {
            // Get all selected items from the Grid:
            var items = grid.selection.getSelected();
            if(items.length){
                // Iterate through the list of selected items.
                // The current item is available in the variable
                // "selectedItem" within the following function:
                dojo.forEach(items, function(selectedItem) {
                    if(selectedItem !== null) {
                        // Delete the item from the data store:
                        jsonStore.deleteItem(selectedItem);
                    } // end if
                }); // end forEach
            } // end if

            save();
        }
        </script>
</head>
<body class="tundra">
        <h1>Gasket Lookup</h1>
        <div class="partsContainer">
                <div class="gridContainer">
                        <div id="gridNode"></div>
                </div>
        </div>
        <button onclick="updateGasketTypes();">Change gasket types</button>
    <button onclick="save();">Save gasket types</button>
    <button onclick="add();">Add gasket</button>
    <button onclick="del();">Delete gasket</button>
</body>
</html>

Change History (11)

comment:1 Changed 10 years ago by cfleisch

I also notice that when I select Cell 2, (that is to edit the next "type" cell), I see not to mention the fact that the "old" value of the cell is gone.

In Firebug I see:

_97.replace is not a function: dojo.js (line 1053)

(1053 out of range 17)

Once again, clicking on the adjacent cell inserts the previously edited value... Re-clicking on same cell 2 then allows me to edit the value.

and so on....

Any thoughts? My project is on hold while I have this problem.

Your help, greatly appreciated.

Chris

comment:2 Changed 10 years ago by Adam Peller

Can you reproduce this error on an unoptimized build in Firebug to show the actual line of code and its location? (You may need to use Firebug's "Break on Error" option)

comment:3 Changed 10 years ago by Adam Peller

also, it would be great if you could get this information on the 1.3.0 beta. thanks

comment:4 Changed 10 years ago by Bryan Forbes

Milestone: tbdfuture

comment:5 Changed 10 years ago by cfleisch

Just checked this against 1.2.3, dojo.js.uncompressed.js:

The error I got was:

'_97.replace is not a function [Break on this error] return _97.replace(/(?:(<a(?=\s).*?\shre.../gi,"$1$4$2$3$5$2 _djrealurl=$2$3$5$2");

../dojo-...chText.js (line 1038)'

Checking against build 1.3 now...

comment:6 Changed 10 years ago by cfleisch

When I try with dojo 1.3.0b3 I get the following error?

failed loading ../dojo-release-1.3.0b3/dojo/../dojox/grid/DataGrid.js with error: TypeError?: dijit._Widget is undefineddojo.js....ressed.js (line 639) Could not load 'dojox.grid.DataGrid?'; last tried '../dojox/grid/DataGrid.js' [Break on this error] if(!dojo._hasResource["dijit._KeyNavCont...","th","tr","xx","zh","zh-cn","zh-tw"]);

Adding dojo.require("dijit._Widget");

I get the following error:

failed loading ../dojo-release-1.3.0b3/dojo/../dojox/grid/DataGrid.js with error: dijit.MenuItem?: mixin #0 is nulldojo.js....ressed.js (line 639) Could not load 'dojox.grid.DataGrid?'; last tried '../dojox/grid/DataGrid.js' [Break on this error] throw new Error("Could not load '" + ...me + "'; last tried '" + relpath + "'");

Then... after finding out I need to add the requires as follows:

dojo.require("dojo.parser");

dojo.require("dijit.dijit"); dojo.require("dojo.data.ItemFileWriteStore?");

dojo.require("dojox.grid.DataGrid?");

dojo.require("dijit.Editor"); dojo.require("dojox.grid.cells.dijit"); dojo.require("dijit.MenuItem?");

I am able to see/show the page...

Now reproducing the same steps, I am able to edit Cell 1, i click on its adjacent cell to "save" the update.

I then click on Cell 2 (ie., the cell directly below the first)... It goes in to the editable state, but has the previous Cell 1 value, (not Cell 2's original data).

I then get the following error:

_96.replace is not a function [Break on this error] return _96.replace(/(?:(<a(?=\s).*?\shre.../gi,"$1$4$2$3$5$2 _djrealurl=$2$3$5$2");

On line:

../dojo-...chText.js (line 1016)

ie., ../dojo-release-1.3.0b3/dojo/../dijit/_editor/RichText.js

Thanks for your help thus far... closer, that is I can edit the cell, but no cigar (not the right value in the cell to edit)...

Cheers,

Chris

comment:7 Changed 10 years ago by Adam Peller

Cc: liucougar added
Description: modified (diff)

Strangely, that line appears to be around 1801 in RichText?.js, not 1016 (see _preFixUrlAttributes)

Cougar, does this ring a bell?

comment:8 Changed 10 years ago by Adam Peller

Description: modified (diff)

comment:9 Changed 10 years ago by cfleisch

Folks, just stumbled on to something interesting for this particular bug.

When the "editable" cell has more than one character, the cell DOES maintain it's old value... and does reutrn to an edit state in dojo 1.3.x (testing on RC1 now)

So If I update my json file from:

{
	identifier: 'part_num',
	label: 'part_num',
	items: [
		{ part_num: '4001', min_temp: -946, max_temp: 931, max_pres: 647, type: 1, thick: 0.25, inner: 0.9375, outer: 13.4375 },
		{ part_num: '4002', min_temp: -601, max_temp: 1894, max_pres: 208, type: 1, thick: 0.03125, inner: 4.0, outer: 13.75 },
		{ part_num: '4003', min_temp: 456, max_temp: 791, max_pres: 132, type: 1, thick: 0.125, inner: 2.3125, outer: 6.1875 },

to

{
	identifier: 'part_num',
	label: 'part_num',
	items: [
		{ part_num: '4001', min_temp: -946, max_temp: 931, max_pres: 647, type: 'This is a test', thick: 0.25, inner: 0.9375, outer: 13.4375 },
		{ part_num: '4002', min_temp: -601, max_temp: 1894, max_pres: 208, type: 1, thick: 0.03125, inner: 4.0, outer: 13.75 },
		{ part_num: '4003', min_temp: 456, max_temp: 791, max_pres: 132, type: '1 this is a test', thick: 0.125, inner: 2.3125, outer: 6.1875 },

Perhaps the replace function for RichText? (and the Editor type) doesn't work when its a single character, and not a string...?

comment:10 Changed 10 years ago by cfleisch

Folks, I have also noticed that if I change the json file from:

{
	identifier: 'part_num',
	label: 'part_num',
	items: [
		{ part_num: '4001', min_temp: -946, max_temp: 931, max_pres: 647, type: 1, thick: 0.25, inner: 0.9375, outer: 13.4375 },
		{ part_num: '4002', min_temp: -601, max_temp: 1894, max_pres: 208, type: 1, thick: 0.03125, inner: 4.0, outer: 13.75 },
		{ part_num: '4003', min_temp: 456, max_temp: 791, max_pres: 132, type: 0, thick: 0.125, inner: 2.3125, outer: 6.1875 },

to

{

identifier: 'part_num', label: 'part_num', items: [

{ part_num: '4001', min_temp: -946, max_temp: 931, max_pres: 647, type: '1', thick: 0.25, inner: 0.9375, outer: 13.4375 }, { part_num: '4002', min_temp: -601, max_temp: 1894, max_pres: 208, type: '1', thick: 0.03125, inner: 4.0, outer: 13.75 }, { part_num: '4003', min_temp: 456, max_temp: 791, max_pres: 132, type: '0', thick: 0.125, inner: 2.3125, outer: 6.1875 },

ie., instead of a number its a "character", it works... the editor, the cells and the datagrid all work? Is this a case of the datagrid not working properly with the "editor" or is it a malformed json file, (a number rather than a "character")???

comment:11 Changed 8 years ago by evan

Milestone: future1.6
Resolution: worksforme
Status: newclosed

Not able to reproduce in nightly test case(the 'Message' column is dojox.grid.cells.Editor), please reopen this if there were a cleaned test case to reproduce.

Note: See TracTickets for help on using tickets.