Dojo EnhancedGrid editable problem

Question

I'm having problem with making my dojo EnhancedGrid editable. Currently, I can double click the grid cells and I can change the value, but the moment I press enter again or try to leave the cells (i.e. to save the new value to the grid), I received the "assertion failed in ItemFileWriteStore" error in my firebug.

Below is my source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
    <style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css";
        .dojoxGrid table { margin: 0; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
    </script>

    <script type="text/javascript">
        dojo.require("dojox.grid.EnhancedGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojox.grid.cells._base");

        dojo.addOnLoad(function() {

            var layoutabc = 
            [[
                {
                    field: "title",
                    name: "TitleofMovie",
                    width: "300px",
                    editable: true
                },
                {
                    field: "year",
                    name: "Year",
                    width: "200px",
                    editable: true
                },
                {
                    field: "producer",
                    name: "Producer",
                    width: "auto",
                    editable: true,
                    type: dojox.grid.cells.Cell
                }
            ]];


            var mystore = new dojo.data.ItemFileWriteStore({
                url: "movies.json"
            });

            // create a new grid:
            var grid = new dojox.grid.EnhancedGrid(
                {
                    query: {},
                    store: mystore,
                    structure: layoutabc
                },
                document.createElement("div")
            );
            dojo.byId("gridDiv").appendChild(grid.domNode);

            grid.startup();
        });
    </script>
</head>

<body class="claro">
    <div id="gridDiv" style="width: 800px; height: 400px;">
    </div>
</body>

And this is the content of my movies.json (the content of data is weird, I know):

{
    items: 
    [
        {
            title: "Africa",
            year: "continent",
            producer: "Katia Lund"
        },
        {
            title: "Kenya",
            year: "country",
            producer: "Christine Jeffs"
        },
        {
            title: "Mombasa",
            year: "city",
            producer: "Ridley Scott"
        }
    ]
}

Additional info: If I changed to use DataGrid instead of EnhancedGrid, then the whole thing works... — Hery, Dec 14 '10 at 06:25
how you have solved? I have plugin set at "{nestedSorting:true}" and add at my code (in the add buttom) this part var gPlugins="{nestedSorting: true}"; grid.plugins = gPlugins; but nothing change; when I refresh the table don't add the row. — , Oct 26 '11 at 14:26
@francesco: I passed the 'plugins' attribute into the constructor of the EnhancedGrid itself. Though I doubt it will make any difference, you should try it. If it doesn't solve your problem, you should ask a new question as this question was asked a while back and the dojo version you used may be different now. — Hery, Oct 27 '11 at 02:34

score 1 · Accepted Answer · answered Dec 14 '10 at 07:07

1

Problem solved. Turns out I need to define the "plugins" attribute for the EnhancedGrid object even though it is just an empty object. Once that is defined it works properly.

answered Dec 14 '10 at 07:07

Hery

7,443
9
36
41

score 0 · Answer 2 · answered Dec 14 '10 at 04:14

I think the problem is that your store does not contain any identifier so when the grid tries to write to the store, it does not have any way to know which entry it should write to.

I would start by editing the response for movies.json, perhaps like this:

{
    identifier:"id",
    items: 
    [
        {
            id:1
            title: "Africa",
            year: "continent",
            producer: "Katia Lund"
        },
        {
            id:2
            title: "Kenya",
            year: "country",
            producer: "Christine Jeffs"
        },
        {
            id:3
            title: "Mombasa",
            year: "city",
            producer: "Ridley Scott"
        }
    ]
}

Note that you don't have to include the id field in the layout list, it will be accessible to the grid anyway. Also, as identifier implies, it must be a unique value for each item in the store, otherwise it will fail to initialize.

Tried this, it still doesn't work :( Tried adding label as well, doesn't work as well :( — Hery, Dec 14 '10 at 04:58

Dojo EnhancedGrid editable problem

2 Answers2