dojoselectiondgrid

What could be the reason that dgrid-select Selection is not working for me?


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?


Solution

  • 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.