dojox.grid.EnhancedGrid.plugins.Menu¶
Authors: | Evan Huang |
---|---|
Project owner: | Evan Huang |
since: | V.1.6 |
Introduction¶
With this feature, users can add context menus either through declarative HTML markup or JavaScript. The following menu types are supported:
- Header menu
- Row menu
- Cell menu
- Selected region menu - Selected regions could be selected rows, columns or cells
HTML markup usage sample
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
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: {menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"}}},
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 data-dojo-type="dijit.Menu" id="headerMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Header Menu Item 1</div>
<div data-dojo-type="dijit.MenuItem">Header Menu Item 2</div>
<div data-dojo-type="dijit.MenuItem">Header Menu Item 3</div>
<div data-dojo-type="dijit.MenuItem">Header Menu Item 4</div>
</div>
<div data-dojo-type="dijit.Menu" id="rowMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Row Menu Item 1</div>
<div data-dojo-type="dijit.MenuItem">Row Menu Item 2</div>
<div data-dojo-type="dijit.MenuItem">Row Menu Item 3</div>
<div data-dojo-type="dijit.MenuItem">Row Menu Item 4</div>
</div>
<div data-dojo-type="dijit.Menu" id="cellMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Cell Menu Item 1</div>
<div data-dojo-type="dijit.MenuItem">Cell Menu Item 2</div>
<div data-dojo-type="dijit.MenuItem">Cell Menu Item 3</div>
<div data-dojo-type="dijit.MenuItem">Cell Menu Item 4</div>
</div>
<div data-dojo-type="dijit.Menu" id="selectedRegionMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Action 1 for Selected Region</div>
<div data-dojo-type="dijit.MenuItem">Action 2 for Selected Region</div>
<div data-dojo-type="dijit.MenuItem">Action 3 for Selected Region</div>
<div data-dojo-type="dijit.MenuItem">Action 4 for Selected Region</div>
</div>
</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;
}
JavaScript usage sample
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Menu");
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'}
]];
/*programmatic menus*/
var menusObject = {
headerMenu: new dijit.Menu(),
rowMenu: new dijit.Menu(),
cellMenu: new dijit.Menu(),
selectedRegionMenu: new dijit.Menu()
};
menusObject.headerMenu.addChild(new dijit.MenuItem({label: "Header Menu Item 1"}));
menusObject.headerMenu.addChild(new dijit.MenuItem({label: "Header Menu Item 2"}));
menusObject.headerMenu.addChild(new dijit.MenuItem({label: "Header Menu Item 3"}));
menusObject.headerMenu.addChild(new dijit.MenuItem({label: "Header Menu Item 4"}));
menusObject.headerMenu.startup();
menusObject.rowMenu.addChild(new dijit.MenuItem({label: "Row Menu Item 1"}));
menusObject.rowMenu.addChild(new dijit.MenuItem({label: "Row Menu Item 2"}));
menusObject.rowMenu.addChild(new dijit.MenuItem({label: "Row Menu Item 3"}));
menusObject.rowMenu.addChild(new dijit.MenuItem({label: "Row Menu Item 4"}));
menusObject.rowMenu.startup();
menusObject.cellMenu.addChild(new dijit.MenuItem({label: "Cell Menu Item 1"}));
menusObject.cellMenu.addChild(new dijit.MenuItem({label: "Cell Menu Item 2"}));
menusObject.cellMenu.addChild(new dijit.MenuItem({label: "Cell Menu Item 3"}));
menusObject.cellMenu.addChild(new dijit.MenuItem({label: "Cell Menu Item 4"}));
menusObject.cellMenu.startup();
menusObject.selectedRegionMenu.addChild(new dijit.MenuItem({label: "Action 1 for Selected Region"}));
menusObject.selectedRegionMenu.addChild(new dijit.MenuItem({label: "Action 2 for Selected Region"}));
menusObject.selectedRegionMenu.addChild(new dijit.MenuItem({label: "Action 3 for Selected Region"}));
menusObject.selectedRegionMenu.addChild(new dijit.MenuItem({label: "Action 4 for Selected Region"}));
menusObject.selectedRegionMenu.startup();
/* create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
plugins : {menus: menusObject}},
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 menu feature plugin
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
...
- Use menu feature
with HTML markup
<div id="grid" data-dojo-type="dojox.grid.EnhancedGrid"
data-dojo-props="plugins:{menus:{headerMenu:’headerMenu‘, rowMenu:’rowMenu‘, cellMenu:’cellMenu‘, selectedRegionMenu:’selectedRegionMenu‘}}" ... >
<div data-dojo-type="dijit.Menu" id="headerMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Header Menu Item 1</div>
</div>
<div data-dojo-type="dijit.Menu" id="rowMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Row Menu Item 1</div>
</div>
<div data-dojo-type="dijit.Menu" id="cellMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Cell Menu Item 1</div>
</div>
<div data-dojo-type="dijit.Menu" id="selectedRegionMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem">Action 1 for Selected Region</div>
</div>
</div>
with JavaScript (using a markup menu)
var grid = new dojox.grid.EnhancedGrid({id: "grid",
plugins: {menus:{headerMenu:’headerMenu‘, rowMenu:’rowMenu‘, cellMenu:’cellMenu‘, selectedRegionMenu:’selectedRegionMenu‘}}, ...},
dojo.byId('gridDiv'));
Listening to Menu Events¶
There will be four events fired corresponding to the appropriate menu types:
- onRowContextMenu(e)
- onCellContextMenu(e)
- onHeaderCellContextMenu(e)
- onSelectedRegionContextMenu(e)
The Event parameter contains rowIndex and cellIndex, so following is a quick sample shows how to get row/column index when the menu popped up:
dojo.connect(grid, 'onRowContextMenu', function(e){
var rowIndex = e.rowIndex;
var colIndex = e.cellIndex;
});
Tips¶
- How to get selected rows, columns or even cells when the menu is popped up?
- Normally, when the Selector plugin is off, we can get selected rows by:
grid.selection.getSelected()
- When the Selector plugin is turned on, we can get the selected rows/column/cell with the following way:
grid.plugin('selector').getSelected('row'|'col'|'cell');
More details please refer to the Selector plugin
See Also¶
- dojox.grid.EnhancedGrid - The enhanced grid supporting plugins
- dojox.grid.EnhancedGrid.plugins - Overview of the plugins of enhanced grid