Click here to Skip to main content
13,553,357 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 4 Apr 2012
Licenced CPOL

Short overview of Dojo Framework Enhanced Grid or how to organize output data in tabular form quickly and easily

, 4 Apr 2012
Rate this:
Please Sign up or sign in to vote.
Short overview of Dojo Framework Enhanced Grid

Often, a lot of beginners in web-development suffer from a need to invent the wheel over and over again. Output and formatting of data becomes more complicated and confusing. But! This is Dojo can easily cope with this task! Foreword

If you start web application development, you will definitely face a number of problems. Usually, the application use a large number of tables to display data. Each table - it's a kind of an agent, engaged in retrieving data from the database and generating of HTML. The number of tables as well as the number of agents was increasing constantly. That fact was creating some problems in the case of high loads on the server.

It was decided to use the Dojo to solve this problem. Now all that is required — it is the data in JSON, and Enhanced Grid component does all the routine work for us!

To understand the task better, you can watch this video from 3 minutes 35 seconds:

A minimum of theory

Each grid in the Dojo is a widget that generates an HTML table, which is based on a sample of data. This data is stored in a dedicated repository - Store.

Features of Enhanced Grid:

  • Data formatting
  • Data filtering - dojox.grid.enhanced.plugins.Filter
  • Export of data in various formats - dojox.grid.enhanced.plugins.exporter. *
  • An enclosed sorting - dojox.grid.enhanced.plugins.NestedSorting
  • Context menus - dojox.grid.enhanced.plugins.Menu
  • Drag'n'Drop - dojox.grid.enhanced.plugins.DnD
  • Paginal output- dojox.grid.enhanced.plugins.Pagination
  • Data search - dojox.grid.enhanced.plugins.Search


Creating a data storage

dojo.require ("");

Creating a data structure

 var data = {
    identifier: 'id',    // the name of field, which will be used as an identifier
    items: [ ]          // here we need to load the JSON data

Creating a data storage

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

Creating a table layout

 var layout = [[
    {'Name': 'Column 1', 'field': 'id'},
    {'Name': 'Column 2', 'field': 'col2'},
    {'Name': 'Column 3', 'field': 'col3', 'width': '230px '},
    {'Name': 'Column 4', 'field': 'col4', 'width': '230px '}

Creating a Grid

 dojo.require ("dojox.grid.EnhancedGrid");
 var grid = new dojox.grid.EnhancedGrid ({
    id: 'grid',
    store: store,
    structure: layout,
    rowSelector: '20px ',
    selectionMode: 'multiple'
 }, Document.createElement ('div'));
 dojo.byId ("gridDiv"). appendChild (grid.domNode);
 / / Display the grid
 grid.startup ();

Our grid is ready!


With the help of Enhanced Grid we can work with tables of any structure, only indicating a table layout and loading the data.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

QArea Team
QArea - software outsourcing company
United States United States
QArea is a software development outsourcing company that specializes in wide range of professional fields:

- custom software development
- software testing
- web development
- mobile applications development

Our company has a huge experience in these fields and we are always glad to share our knowledge with others. We are looking forward you to find our articles and tips useful.

Visit our website:

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180515.1 | Last Updated 4 Apr 2012
Article Copyright 2012 by QArea Team
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid