dojox.grid.EnhancedGrid

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();
});

<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:

  1. Import theme CSS
@import "dijit/themes/claro/claro.css";
@import "dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
...
  1. 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");
...
  1. 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.

Accessibility

EnhancedGrid provides the same a11y support level as DataGrid , or see the above plugin pages for more details.

And summary attribute can be added in a similar way as DataGrid.

See also