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

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.