Click here to Skip to main content
Click here to Skip to main content

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

Solution

Creating a data storage

//
dojo.require ("dojo.data.ItemFileWriteStore");

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 dojo.data.ItemFileWriteStore ({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!

Total

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

License

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: www.qarea.com
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 4 Apr 2012
Article Copyright 2012 by Qarea Team
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid