dojox.grid.EnhancedGrid.plugins.IndirectSelection ¶

Authors:	Evan Huang
Project owner:	Evan Huang
since:	V.1.6

Contents

dojox.grid.EnhancedGrid.plugins.IndirectSelection

Introduction ¶

This feature provides indirect row selection support either through

Radio buttons - for single row selection, and

Check boxes - for multiple row selections

Please note indirect selection is completely dependent on the selection mode of EnhancedGrid so check boxes are used for “extended” and “multiple” selection mode (“extended” is the default mode), and radio buttons are used for “single” selection mode. For more details of Grid selection modes, please refer to the specification of the base Grid.

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

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'}
    ]];

    /* create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px',
        plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}}},
      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.require("dojox.grid.enhanced.plugins.IndirectSelection");

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'}
    ]];

/* create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px',
        plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}}},
      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: 43em;
    height: 20em;
}

Usage¶

Declare indirect selection feature plugin

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

Use indirect selection feature with check boxes

with HTML markup

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

with JavaScript

var grid = new dojox.grid.EnhancedGrid({id: "grid", plugins: {indirectSelection: true}, ...}, dojo.byId('gridDiv'));

Use indirect selection feature with radio buttons

with HTML markup

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

with JavaScript:

var grid = new dojox.grid.EnhancedGrid({id: "grid", plugins: {indirectSelection: true}, selectionMode: "single", ...}, dojo.byId('gridDiv'));

It is unlikely that the row headers will be desired when indirect selection is used. The following code removes the row headers from the grid.

With HTML markup:

<div id="grid" data-dojo-type="dojox.grid.EnhancedGrid" data-dojo-props="plugins:{indirectSelection: true}, rowSelector:'0px'" ... />

With JavaScript:

var grid = new dojox.grid.EnhancedGrid({id: "grid", plugins: {indirectSelection: true}, rowSelector: "0px", ...}, dojo.byId('gridDiv'));

Scenario¶

Indirect selection by radio buttons

Indirect selection by check boxes

Besides selecting or deselecting rows by clicking on check boxes, the SHIFT key can be held during the 2nd click to select or deselect a range of rows.

An additional selection technique is to swipe through check boxes (mouse down on the first, drag through the adjacent check boxes and then release on the last).

Accessibility¶

Keyboard Support¶

Key	Action
UP/Down arrow keys	Navigate keyboard focus across cells that contain radio buttons or check boxes
SPACE key	Radio button - select a row Check box - select or de-select a row.
SHIFT + Click SHIFT + SPACE key	Select or de-select a range of rows
SHIFT+ UP/Down arrow keys	Extend the selection or de-selection - only for check boxes .

The above keys are only effective when keyboard focus is in the first column that contains radio buttons or check boxes.

Note that extended selection is also enabled through the row headers as well.

Usages¶

Turn on Select All checkbox in the column header

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

Listen to events when the check box/radio button is checked/unchecked

dojo.connect(grid.selection, 'onSelected'|'onDeselected', function(rowIndex){...})

// when Select All checkbox is changed
dojo.connect(grid.rowSelectCell, 'toggleAllSelection', function(newValue){...})

When the “Indirect Selection” feature is enabled, you could handle row selection programmatically as follows.

for(var i = 0; i < selectedRows.length/*Array of selected row index*/; i++){
   grid.rowSelectCell.toggleRow(selectedRows[i], true);
}

When in non-‘single’ selection mode, it’s also easy to select or deselect all rows by:

dijit.byId("grid").rowSelectCell.toggleAllSelection(true|false);

Another handy usage is to enable or disable a check box or radio button for a certain row by:

dijit.byId('grid').rowSelectCell.setDisabled(rowIndex, true|false);

You can check whether a certain row is selected with the following code.

dijit.byId('grid').selection.isSelected(rowIndex) // returns true or false

It’s also possible to make some styling customizations for the indirect selection column.

<div id="grid" data-dojo-type="dojox.grid.EnhancedGrid" data-dojo-props="plugins:{indirectSelection:{name:'Selection',width:'70px',styles:'text-align:right;'}}" ...></div>

var grid = new dojox.grid.EnhancedGrid({id:"grid", plugins:{indirectSelection:{name:"Selection",width:"70px",styles:"text-align:center;"}, ...}, dojo.byId('gridDiv'));

Known Issues ¶

There are known compatibility issues when Indirect Selection is used together with Selector plugin

dojox.grid.EnhancedGrid.plugins.IndirectSelection ¶

Introduction ¶

Usage¶

Scenario¶

Accessibility¶

Keyboard Support¶

Usages¶

Known Issues ¶

See Also ¶

Table of Contents

dojox.grid.EnhancedGrid.plugins.IndirectSelection¶

Introduction¶

Usage¶

Scenario¶

Accessibility¶

Keyboard Support¶

Usages¶

Known Issues¶

See Also¶

Table of Contents

dojox.grid.EnhancedGrid.plugins.IndirectSelection ¶

Introduction ¶

Known Issues ¶

See Also ¶