dgrid’s Selection mixin
dgrid is SitePen’s lightweight, modular, and easily extensible modern grid component, designed for use with AMD and Dojo. The Selection and CellSelection mixins enable selection of rows or cells, both from mouse or keyboard actions and programmatically. Adding selection functionality to a grid is a simple as mixing in the desired module:
require([
'dojo/_base/declare',
'dgrid/Grid',
'dgrid/Selection'
], function (declare, Grid, Selection) {
var SelectionGrid = declare([Grid, Selection]);
var grid = new SelectionGrid({
columns: {
firstName: 'First Name',
lastName: 'Last Name'
}
}, 'grid');
});
Restricting row selection
With the Selection module mixed in the grid now offers the ability to select rows through the UI or programmatically using the grid’s select
method. The Selection module is configurable through additional options on the grid configuration, allowing you to specify a function to control whether or not a row can be selected. The select
method will observe any restrictions imposed by the allowSelect
function, if present. With the configuration below the allowSelect
function will prevent selection of rows with an id
less than 3.
var grid = new SelectionGrid({
columns: {
firstName: 'First Name',
lastName: 'Last Name'
},
allowSelect: function (row) {
return row.id > 2;
}
}, 'grid');
More Approaches to Selection
dgrid provides additional methods to inspect and manipulate the selection state. These methods can be used by code linked to alternate UI mechanisms for controlling selection state. One common paradigm for row selection is to provide a grid column with checkboxes or radio buttons to select rows. In dgrid this is provided by the selector column plugin. With selectionMode
set to “none” rows cannot be selected by clicking on them, but can still be selected programmatically, or using the selection column.
Learning more
The dgrid site includes demos and tutorials, and the wiki provides an excellent reference. We also cover dgrid in depth in our Dojo workshops offered throughout the US, Canada, and Europe, or at your location. We also provide expert JavaScript and Dojo support and development services, to help you get the most from JavaScript and Dojo.