I have this piece of code:
define([
...
"MyGrid/lib/dgrid/Grid",
"MyGrid/lib/dgrid/Keyboard",
"MyGrid/lib/dgrid/Selection",
"MyGrid/lib/dgrid/extensions/Pagination",
"MyGrid/lib/dgrid/extensions/ColumnHider",
"MyGrid/lib/dgrid/extensions/ColumnResizer",
...
], function (declare, ..., dgrid, dgridKeyboard, dgridSelection,
dgridPagination, dgridColumnHider, dgridColumnResizer,
Memory, widgetTemplate) {
...
// creates the grid
_createGrid: function (columns, collection) {
this._grid = new CustomGrid({
className: "dgrid-autoheight",
columns: columns,
collection: collection,
firstLastArrows: true,
loadingMessage: "Loading...",
noDataMessage: "No results.",
pagingLinks: 2,
pageSizeOptions: [10, 15, 25],
pagingTextBox: false,
selectionMode: "toggle",
allowSelectAll: true
}, this.gridNode);
this._grid.startup();
},
...
// Attach events to HTML dom elements
_setupEvents: function () {
logger.debug(this.id + "._setupEvents");
...
this._selectEventListener = this._grid.on("dgrid-select", function (event) {
var rows, id;
console.log(event.grid.id + ": selected " + dojoArray.map(event.rows, function (row) {
return row.id;
}).join(", "));
console.log("selection: " + JSON.stringify(event.grid.selection, null, " "));
// Get the rows that were just selected
rows = event.rows;
console.log("selectionMode: " + event.grid.selectionMode);
console.log("Row entries: " + Object.entries(rows));
console.log("Row[0] entries: " + Object.entries(rows[0].element));
console.log("Selection: " + Object.entries(event.grid.selection));
// Iterate through all currently-selected items
for (id in event.grid.selection) {
if (event.grid.selection[id]) {
console.log("keys: " + Object.entries(event.grid.selection[id]));
}
}
});
},
...
// rerender the grid.
_renderGrid: function (objs) {
var objAttributes, gridColumns;
if (objs.length) {
objAttributes = objs[0].getAttributes();
if (this._grid) {
this._selectEventListener.remove();
this._errorEventListener.remove();
this._grid.destroy();
dojoConstruct.place(this.gridNode, this.domNode);
}
// Create header and content data.
gridColumns = this._createColumns(objAttributes);
this._gridStore = new Memory({
data: this._createData(objs, objAttributes, gridColumns)
});
this._createGrid(gridColumns, this._gridStore);
this._setupEvents();
}
},
// create grid HeaderData from retrieved objects.
_createColumns: function (objAttributes) {
var fieldname, columns, i;
columns = [
{field: "id", label: "ID"}
];
if (objAttributes) {
for (i in objAttributes) {
fieldname = objAttributes[i].toLowerCase().replace(".", "-");
columns.push({field: fieldname, label: objAttributes[i]});
}
}
return columns;
},
Selection however is really really spotty. It only works with double-click. Below is the result of clicking on a selection:
dgrid_0: selected
selection: {
"undefined": true
}
selectionMode: toggle
Row entries: 0,[object Object]
Row[0] entries: rowIndex,0
Selection: undefined,true
keys:
As you can see, it only picks up selection by event rows, not by asking grid.selection. Multiple selections aren't picked up either.
Why is it not registering?
One of the reasons that I suspect here can be no idProperty
in collection. There should be id
attribute if you want to map the id of collection objects to it. If you want to map it to a different attribute, then define idProperty: otherProperty
while creating collection.