EnhancedGrid in Dojo experiencing issues with its editable feature

I am encountering an issue with making my Dojo EnhancedGrid editable. Currently, I am able to double click on the grid cells and change the value, but when I try to save the new value or leave the cells, I receive an "assertion failed in ItemFileWriteStore" error in Firebug.

Below is the 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>

This is the content of my movies.json (the data may seem odd, but it's just for testing purposes):

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

Answer №1

Issue resolved! I discovered that I had to specify the "plugins" attribute for the EnhancedGrid object, even though it was just an empty object. After defining it, everything started functioning correctly.

Answer №2

It seems like the issue stems from your store lacking an identifier. This causes confusion for the grid when it attempts to write to the store as there's no way to determine which entry it should be writing to.

To address this, you can modify the response in movies.json as follows:

{
    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"
        }
    ]
}

Keep in mind that the id field doesn't need to be included in the layout list since it will be accessible to the grid regardless. The identifier must be unique for each item in the store to ensure successful initialization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure a function operates even when the mouse is stationary?

$(document).ready(function() { var score = 0; $("body").mousemove(function() { score++; $("#result").val(score); console.log(score); }); }); As I move my mouse, the score keeps increasing. But, I'm wonde ...

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

Trigger a function following a collection update in Angular Meteor

I am in the process of developing a multiplayer game, and I would like a specific function to be triggered once the first player updates an "isStarted" field in the collection. Within my controller code: angular.module('mcitygame').directive(&a ...

How do I reset and resubmit a form while utilizing Redux-Form for search filters?

New Update: Check out this Pen Example https://codepen.io/anon/pen/vwzGYY?editors=0011 Introduction After conducting my research, it appears that I may need to approach this problem from a different angle. Do you have any suggestions for me? Situation ...

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

What is the best way to ensure that the operations are not completed until they finish their work using RX

Is there a way to make RXJS wait until it finishes its work? Here is the function I am using: getLastOrderBeta() { return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, { query: { equalTo: fa ...

Using JavaScript, eliminate a tier of item

Utilizing reactJS currently, my objective is to reindex each object in hooks with the hooks.event nested inside each hook: const supervisor = { "hooks": [ { "is_activate": true, "event&qu ...

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

Utilizing Jquery for an AJAX call incorporating Odata into the request

I've encountered a challenge while developing a small application to search for data within the Odata dataset from KVK (the Dutch chamber of commerce). The goal is to retrieve information based on file numbers, ZIP codes, or tradenames. Here is an ex ...

Utilize JavaScript to execute postback calls

Currently, I am working on a project using asp.net MVC5. Within my HTML code, I have the following row: <input id="setCulture" type="hidden" name="culture" value="" /> Accompanied by this JQuery row: $('#setCulture').parents("form"). ...

Having trouble with my Express.js logout route not redirecting, how can I troubleshoot and resolve it?

The issue with the logout route not working persists even when attempting to use another route, as it fails to render or redirect to that specific route. However, the console.log("am clicked"); function works perfectly fine. const express = require('e ...

The intersectsBox function unexpectedly returns true instead of false

I recently came across a tutorial on MDN that discussed the intersection of bounding boxes. Intrigued, I decided to try out the code snippet provided: const testBoxGeometry = new THREE.BoxGeometry(3, 3, 3); const testBoxMaterial = new THREE.MeshBasicM ...

I am having trouble formatting dates using the Moment.js library on Internet Explorer, it keeps returning

When using the moment.js date library to format a date, I encountered an issue on IE where I would get NaN in the output. This problem did not occur on other browsers such as Chrome and Firefox. var value = "2015-11"; moment(value).format("YYYY-DD-01 00: ...

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

With the use of discreet JavaScript, the parameter is not empty; instead, it contains values

Previously, my JavaScript code was functioning correctly when it was within the same page as my cshtml file: function SaveEntity() { // more code here alert(entity.FirstName); /* this shows that entity's properties have values */ $.post( ...

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Currently, I am attempting to dynamically alter the src of an iframe using Angular 2. Here is what I have tried: HTML <iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe> COMPONE ...

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

Assessing the effectiveness of Internet Explorer's performance

Can you help me decipher the insights provided by the performance/profiling tab on Chrome or Internet Explorer? I'm aiming to identify any potential memory leaks or architectural weaknesses in my application. While the loading time of my application i ...

An error occurred when trying to reopen a BrowserWindow after clicking a button in Electron, resulting in the destruction

Exploring the world of the Electron Framework, I am currently working on creating a basic desktop application. However, I have encountered an issue. Whenever I open a new window in my Electron app and then try to close it using the menu bar close button, ...

Angular.js page failing to reflect changes following Firebase request completion

myApp.controller('RegistrationController', ['$scope', function($scope) { var auth = firebase.database().ref(); // console.log("auth::"+auth); $scope.login = function() { $scope.message = "Welcome " + $scope.user.ema ...