DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > The dojox.grid Widgets Family and the Strange Case of the Items Modification

The dojox.grid Widgets Family and the Strange Case of the Items Modification

Antonio Santiago user avatar by
Antonio Santiago
·
May. 03, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
2.13K Views

Join the DZone community and get the full member experience.

Join For Free

So, you are building a web application and decided to use the great Dojo framework.  Probably, if you need to use grids, you will decide to use some of the available widgets subclass of dojox.grid.

Well, my friend, be aware with the data you use to fill the grid’s store !!!

The scenario

Start creating a piece of code to execute when the page is ready. It will use the DataGrid widget with an ItemFileWriteStore store:

require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/domReady!'],
 
function(DataGrid, ItemFileWriteStore){

Now, create a data object with a set of random items:

// Set up data store
var data = {
    identifier: "id",
    items: []
};
// Initialize with random elements.
var rows = 10;

Note we have stores our items in a different array:

var items = [];
for(var i = 0; i < rows; i++){
    items.push({ id: i+1, col1: "the first column", col2: false, col3: 'A column with a long description', col4: Math.random()*50 });
}
data.items = items;

Now, create the store and set the grid layout:

var store = new ItemFileWriteStore({data: data});
 
// Set up layout
var layout = [[
        {'name': 'Column ID', 'field': 'id', 'width': '100px'},
        {'name': 'Column 1', 'field': 'col1', 'width': '100px'},
        {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
        {'name': 'Column 3', 'field': 'col3', 'width': 'auto'},
        {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

Finally, create the grid (remember to call startup on it):

    // Create a new grid
    var grid = new DataGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'
    });
 
    // Append the new grid to the div
    grid.placeAt("gridDiv");
 
    // Call startup() to render the grid
    grid.startup();
});

The grid code requires us to  have an HTML element in our page:

<div id="gridDiv"></div>

Here is the result of the previous code:

The issue

Our idea behind having the items stored in an array is because trying:

  • to serve as input data for the grid’s store
  • to store the original array to make other operations: to be used in other stores, to make a simple iteration, … whatever we want.

The issue is the array of items used to initialize the data store are modified once the grid’s startup() method is executed.

Lets go to see it in action. Check the value of the items array before and after the grid’s startup() method is executed:

Before

 

 

After

Yes, the objects within the items array are modified for internal pourposes.

Conclusions

This simple issue can have great implications depending on your way to code.

Suppose you are getting a JSON file with information about employees and for each one the set of companies they have worked. You will store this information in JavaScript object array and may be interested on use to:

  • search the boss within employees
  • initialize a TreeGrid to show the whole list of data.

The problem is you can’t use the same object array for the two tasks because in the moment the TreeGrid will execute its startup() method the array of items will change its structure.

How to solve this? Create a new array of objects from your original one or store them in a Memory store.

References

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/index.html

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html

http://dojotoolkit.org/reference-guide/1.7/dojo/data/ItemFileWriteStore.html

Connecting a Store to a DataGrid - http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_grid/

 

 

Data structure

Published at DZone with permission of Antonio Santiago, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Simple Guide to Heaps, Stacks, References, and Values in JavaScript
  • How to Handle Early Startup Technical Debt (Or Just Avoid it Entirely)
  • 3 Predictions About How Technology Businesses Will Change In 10 Years
  • Password Authentication. How to Correctly Do It.

Comments

Web Dev Partner Resources

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo