Geek Answers Handbook

Dojo Grid - Switch between editable and unavailable

I have a grid that will edit small pieces of data based on a more detailed tree structure. To make it easier to find out what the user is saving, I want the grid to be in an uneditable state when the user first sees the grid. When the user is ready, they can click the edit button, which will make parts of the grid editable. You can then save or cancel the button to save changes or revert back.

For the most part, it works. However, if you click "Change", do not change anything, click "Save", and then click "Change" again, you cannot edit the data in the grid, and in some cases you get the message "assertion failed in ItemFileWriteStore". This also happens if you press the cancel button. Sometimes all data in the grid disappears after clicking the cancel button.

Below I have included the smallest piece of code that reproduces the problem I am seeing. Has anyone outside seen this problem and been able to fix it, or am I doing something wrong in my code that causes this problem?

Thanks.

<html> <head> <title>Dojo Grid Test</title> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css"> <script> dojo.require("dojo.data.ItemFileWriteStore") dojo.require("dojox.grid.cells.dijit"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojox.grid.cells"); var attCodeStore = null; var containerGrid = null; function editTable() { var theStructure = containerGrid.structure; theStructure[1].editable = true; theStructure[2].editable = true; containerGrid.setStructure(theStructure); toggleButtons(); } function saveTable() { var theStructure = containerGrid.structure; theStructure[1].editable = false; theStructure[2].editable = false; containerGrid.setStructure(theStructure); attCodeStore.save(); toggleButtons(); } function cancelTable() { var theStructure = containerGrid.structure; theStructure[1].editable = false; theStructure[2].editable = false; containerGrid.setStructure(theStructure); attCodeStore.revert(); toggleButtons(); } function toggleButtons() { if (dojo.hasClass("editButton", "dijitHidden")) { dojo.removeClass("editButton", "dijitHidden"); dojo.addClass("saveButton", "dijitHidden"); dojo.addClass("cancelEditButton", "dijitHidden"); } else { dojo.addClass("editButton", "dijitHidden"); dojo.removeClass("saveButton", "dijitHidden"); dojo.removeClass("cancelEditButton", "dijitHidden"); } } function setupTable() { var attCodeData = {label:'attribute', identifier: 'id', items: [ { id:'itemOneId', alias:'itemOneAlias', description:'itemOneDescription', attribute:'itemOneAttribute' }, { id:'itemTwoId', alias:'itemTwoAlias', description:'itemTwoDescription', attribute:'itemTwoAttribute' }, { id:'itemThreeId', alias:'itemThreeAlias', description:'itemThreeDescription', attribute:'itemThreeAttribute' }, { id:'itemFourId', alias:'itemFourAlias', description:'itemFourDescription', attribute:'itemFourAttribute' }, ] }; attCodeStore = new dojo.data.ItemFileWriteStore({data:attCodeData}) console.log(attCodeStore); console.log(attCodeData); containerGrid = new dojox.grid.DataGrid({ store: attCodeStore, clientSort: true, autoHeight: true, structure: [ {field: 'attribute', width: '100px', name: 'Attribute'}, {field: 'alias', width: '100px', name: 'Alias'}, {field: 'description', width: 'auto', name: 'Description'} ] }); dojo.byId("gridDiv").appendChild(containerGrid.domNode); containerGrid.startup(); } dojo.addOnLoad(function(){ setupTable(); }) </script> </head> <body> <div id="gridArea"> <div> <input type="button" value="Edit" id="editButton" onclick="editTable()"/> <input type="button" value="Save" id="saveButton" onclick="saveTable()" class="dijitHidden"/> <input type="button" value="Cancel" id="cancelEditButton" onclick="cancelTable()" class="dijitHidden" /> </div> </div> <div id="gridDiv"></div> </body> </html>
+4
source share
1 answer

Thought about it (although it went a little). It turns out that when you click on a record in an editable grid, the grid goes into the editing state. (It makes sense.) However, when I saved the data store when the grid was in the editing state, it did not change the state of the grid. The next time I clicked on editing and brought the grid back to where I thought I could start editing, the grid thought that it was still editing the previously selected cell and would only send this information about the cells.

When I insert the following code at the beginning of my saveTable and cancelTable methods, everything works as expected:

 if (containerGrid.edit.isEditing()) { containerGrid.edit.apply(); }

Hope this answer can save someone else after a while.

Thanks.

+6
source

More articles:


All Articles