Exploring the functionalities of Dojo Grid in conjunction with a Memory store

I'm struggling to make the Dojo Grid widget function properly.

The grid itself is included declaratively:

<table data-dojo-type="dojox.grid.DataGrid" data-dojo-attach-point="relationshipsGrid"></table>

Next, I am attempting to connect the grid to a Memory data store:

var relationships = [
                  { id: 1, market: "SE", entity: "An object" },
                  { id: 2, market: "SE", entity: "Another object" },
                  { id: 3, market: "SE", entity: "Yet another object" }
                ];

                var store = new Memory({ data: relationships });

                var layout = [[
                  { 'name': 'ID', 'field': 'id', 'width': '10px' },
                  { 'name': 'Market', 'field': 'market', 'width': '30px' },
                  { 'name': 'Entity', 'field': 'entity', 'width': '100px' }
                ]];

                this.relationshipsGrid.structure = layout;
                this.relationshipsGrid.store = store;
                this.relationshipsGrid.startup();

However, all I see is an empty grid with zero height. When I set a specific height, it only displays as an empty gray area. The markup is generated by Dojo, but it doesn't show any items from my store.

I believe there might be a simple solution to this issue, but any assistance would be greatly valued! :)

Answer №1

dojox/grid is not compatible with the dojo/store API and is no longer being updated.

You have several choices:

  • Wrap a dojo/store using dojo/data/ObjectStore to convert it to the old dojo/data API that dojox/grid can work with
  • Utilize a dojo/data store directly (although this option is not recommended as it has been deprecated for quite some time)
  • Transition to a modern grid library like dgrid (0.3.x supports dojo/store; 0.4.x supports dstore which is intended to be the next generation of dojo stores)

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

Utilizing Ajax to Populate a Dropdown List with Data

Currently, I am retrieving data from an API. The data consists of IDs and charity names that need to be displayed in a dropdown list. While I have successfully shown the charity names in the dropdown list, I am struggling with including the IDs. How can I ...

Pop-up Modal When Exiting the Window

I am looking for a way to display a modal when users attempt to exit the browser window. While I am familiar with creating an alert box, I am interested in having users complete a questionnaire before leaving, rather than just seeing a simple "are you su ...

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

After upgrading from Vuetify version 1.5 to 2.0.18, an issue arises with modules not being found

I encountered the following error: module not found error To address this issue, I took the following steps: Commented out import 'vuetify/src/stylus/main.styl' in the src/plugins/vuetify.js file. Added import 'vuetify/src/styles/main. ...

What is the process for capturing a window screenshot using Node.js?

I am currently conducting research to discover a way to capture a screenshot of a window using Node.js. I have been attempting to achieve this with node-ffi, but I am facing some difficulties at the moment: var ffi = require('ffi'); var user32 ...

Is there a way to emphasize text within a string of object array items?

I am currently utilizing the data provided below to pass as props in React. The functionality is working smoothly, but I have a specific requirement to only emphasize the words "target audience" within the text property. Is there a feasible way to achieve ...

Switch between active tabs (Typescript)

I am working with an array of tabs and here is the code snippet: const navTabs: ITab[] = [ { Name: allTab, Icon: 'gs-all', Selected: true }, { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false }, { Name ...

Tips for resolving CORS error in swagger-ui-express

I'm encountering a "Possible cross-origin (CORS) issue?" error with Spec2 while running this swagger-ui-express application: const express = require('express'); var cors = require('cors'); const app = express(); const swaggerUi = ...

The JavaScript function is designed to only accept whole numbers as input

Whenever I invoke a JavaScript function and pass along 4 parameters, it only functions properly if the fourth parameter consists of integers exclusively. Below is the code snippet for my onchange function: onchange="weekchange(this, <?php echo $i ?> ...

Leveraging next-generation JavaScript (NextJS), incorporate sass-loader for seamless inclusion of variables in each individual

I'm having trouble implementing a custom webpack configuration in my nextjs project. My objective is to automatically import @import "src/styles/variables.scss"; for all scss files in my application. I have successfully set up a webpack con ...

What could be causing the error to occur in the form when I try to submit it?

After creating a page in bootstrap 4, I encountered an issue with the modal. Whenever I click on any input field or button inside the modal, it shows the same error message. I'm quite confused and don't know what's causing this problem. Upon ...

Issues with displaying all pages in the ng2 PDF viewer

Would like to know how to display a PDF document using ng2-pdfviewer. Below is the code snippet for reference: <pdf-viewer [page]="this.vars.page" [src]="this.vars.pdfSrc" [show-all]="true" [origin ...

Creating secure neo4j nodes through a web page using Java/HTML forms: A step-by-step guide

My goal is to develop a webpage that allows users to create profiles through a form, with the form data sent to my server to generate nodes in neo4j. I am focused on preventing unauthorized commands from being sent to my server, such as via injection metho ...

Browser freezing due to large response when appending data with AJAX

I have been developing an application that retrieves numerous records from a database and displays them in a table. This process involves making an AJAX call and appending the new records to the existing ones. The number of records can vary greatly, rangi ...

Combining Objects by Grouping Similar Terms

I'm currently working on organizing a dataset based on different characteristics. I've reached the final step of my task which involves: Transforming this: [ { "AU": { "iOS": 1 } }, { "US": { "iOS": 2 } }, ...

Express, the mongoose package delivers a response of an empty array

I have encountered a common issue regarding pluralization with mongoose default model names. Despite trying various solutions, the problem persists as I am getting an empty array as the result. In my local mongoDB database, there are 2 documents in the "us ...

Guide to manipulating DOM elements with Angular.js: inserting or deleting elements using createElement

Within my Angular directive, I am dynamically generating an external script from the DOM for a specific object within a list. This script includes both a 'script' tag and div content. While I am able to successfully add the script, I am encounter ...

Is there a way to simultaneously use history.push( ) and execute a function in React?

I am looking to add a button to the AppBar component in Material UI that, when clicked, will redirect me to a new page (/login from /). I have successfully used history.push() to achieve this functionality. However, the new page does not display the expect ...

Aligning a div with absolute positioning vertically

There are two elements positioned side by side: an input field and a div. The div is absolutely positioned inside a relative element and placed to the right of the input. The input field has a fixed height, while the height of the div depends on its conte ...

What is the best way to iterate through a designated key in every object within a JSON dataset and store it in a variable called `data` for use with

I am looking to create a line chart displaying stock prices, utilizing JSON data to populate the chart. Let's say I have some JSON data: [ { "close": 116.59, "high": 117.49, "low": 116.22, "open& ...