DGrid - Single Selection Mode while using Drag and Drop -> Results in multiple selections

Question

I am trying to get a DGrid working using the following properties:

• Drag and Drop
• Single Selection

Unfortionatly, this doesn't work quite as easily as I was hoping. I am declaring my DGrid like this:

this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
    store: this.store,
    columns: [
        {label: "ID", field:"id", sortable: false},
        ...
    ],
    touchesToScroll: 2, // Required to enable d&d on mobile
    dndSourceType: "grid-row",
    getObjectDndType: function(item){
        return [item.type ? item.type : this.dndSourceType];
    },
    selectionMode: "single"
}, this.gridDiv);
this._grid.startup();

For the most part this works well. DnD is working. Selection is mostly working. There is just some strange state on occasion. These are the cases:

---

Shift Select:

If I perform a shift select then I will get multiple items looking as if they are selected. They will have the following css classes attached to them:

.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }

When listening to the dgrid-select event, it reports the selected elements correctly.

Attempting to drag the selected elements also works correctly -> only one of them is moved.

Edit: I have found a solution to the Shift Select issue. It is posted as answer below. I still haven't been able to figure out the next issue.

---

Programmatic Deselect:

If I do the following:

1. Select an item
2. Programmaticlly deselect all: this._grid.clearSelection();
3. Programmatically select another item: this._grid.select(row);
4. Leaves two items looking selected.

The two items have different styles. The incorrect one has:

.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }

The correct one has:

.dgrid-selected

As before, when listening to the dgrid-select event, it reports the selected elements correctly.

---

It seems like this is the default dojo DnD moduel that is causing me issues. Looking at the doc it seems like I need to do something with the selector. Selector has a property called singular but I haven't been able to figure out how/where to set this.

Info on singular: https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2

Answer 1

RE programmatic deselect, I think you've found a legit dgrid bug. I took a quick look at this and issued a pull request. See if that changeset resolves the issue for you.

Answer 2

It is possible to prevent Shift Select the multiple selection issue by using the dndParams field.

Instantiating the grid like this will solve the issue:

this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
    store: this.store,
    columns: [
        {label: "ID", field:"id", sortable: false},
        ...
    ],
    touchesToScroll: 2, // Required to enable d&d on mobile
    dndSourceType: "grid-row",
    getObjectDndType: function(item){
        return [item.type ? item.type : this.dndSourceType];
    },
    selectionMode: "single",
    dndParams:{singular: true} // ADDED THIS.
}, this.gridDiv);
this._grid.startup();

---

Still haven't figured out how to deal with programmatic changes.