dojox.grid.EnhancedGrid — The Dojo Toolkit

Project owner:	Evan Huang
since:	V.1.4

Introduction ¶

EnhancedGrid (dojox.grid.EnhancedGrid) provides a rich set of features that enhance the capabilities of base DataGrid. All these features are implemented as separate plugins which can be loaded on demand, the required features must be declared before used.

Run EnhancedGrid without plugins ¶

This is the most simple way to run up an EnhancedGrid, it’s basically the same as a base DataGrid since no plugins are turned on.

dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");

dojo.ready(function(){
    /*set up data store*/
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up 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'}
    ]];

    /*create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'},
      document.createElement('div'));

    /*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);

    /*Call startup() to render the grid*/
    grid.startup();
});

dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");

dojo.ready(function(){
    /*set up data store*/
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

/*set up 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'}
    ]];

/*create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'},
      document.createElement('div'));

/*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);

/*Call startup() to render the grid*/
    grid.startup();
});

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

@import "{{baseUrl}}dojo/resources/dojo.css";
@import "{{baseUrl}}dijit/themes/claro/claro.css";
@import "{{baseUrl}}dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "{{baseUrl}}dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid need a explicit width/height by default*/
#grid {
    width: 45em;
    height: 20em;
}

Run EnhancedGrid with various plugins ¶

EnhancedGrid can also be run with a flexible combination of various plugins, a typical usage will look like:

Import theme CSS

@import "dijit/themes/claro/claro.css";
@import "dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
...

Declare required feature plugins

dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.DnD");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
...

Use feature plugins:

<div id="grid" data-dojo-type="dojox.grid.EnhancedGrid"
    data-dojo-props="plugins:{dnd: true, nestedSorting: true, indirectSelection: true, ...}" ...>
</div>

EnhancedGrid plugin list ¶

Following is a complete list of EnhancedGrid plugins, please refer to the separate page for detail usages:

Nested Sorting - Multiple column sorting
Indirect Selection - Selecting rows with radio button or check box
Declarative context menus - Context menus for row, column, header and selected regions
Filter - Support for defining rules to filter grid content with various data types.
Exporter - Exporting grid content to various formats.
Printer - Providing convenient ways to print grid.
Selector - Unified extended selection support for rows, columns and cells.
DnD - Drag-and-drop support for rows/columns/cells, either within grid or out of grid.
Pagination - Pagination approach to work with huge data set besides the default virtual scrolling way
CellMerge - Merging adjacent cells within a row.
Cookie - Grid preferences persistence e.g column width|order and sorting order.
Search - Searching grid content by regular expressions or simple wildcard pattern.