title: DGrid - Single Selection Mode while using Drag and Drop -> Results in multiple selections
body: <p>I am trying to get a DGrid working using the following properties: </p>
  
  <ul>
  <li>Drag and Drop</li>
  <li>Single Selection</li>
  </ul>
  
  <p>Unfortionatly, this doesn't work quite as easily as I was hoping.  I am declaring my DGrid like this: </p>
  
  <pre><code>this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
      store: this.store,
      columns: [
          {label: "ID", field:"id", sortable: false},
          ...
      ],
      touchesToScroll: 2, // Required to enable d&amp;d on mobile
      dndSourceType: "grid-row",
      getObjectDndType: function(item){
          return [item.type ? item.type : this.dndSourceType];
      },
      selectionMode: "single"
  }, this.gridDiv);
  this._grid.startup();
  </code></pre>
  
  <p>For the most part this works well.  DnD is working.  Selection is <em>mostly</em> working.  There is just some strange state on occasion.  These are the cases: </p>
  
  <hr>
  
  <p><strong>Shift Select</strong>:</p>
  
  <p>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: </p>
  
  <pre><code>.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Uajcm.png" alt="enter image description here"></p>
  
  <p>When listening to the <code>dgrid-select</code> event, it reports the selected elements correctly.  </p>
  
  <p>Attempting to drag the selected elements also works correctly -> only one of them is moved.  </p>
  
  <p><strong><em>Edit:</strong> I have found a solution to the <strong>Shift Select</strong> issue.  <a href="https://stackoverflow.com/a/23255950/251589">It is posted as answer below</a>.  I still haven't been able to figure out the next issue.</em></p>
  
  <hr>
  
  <p><strong>Programmatic Deselect</strong>:</p>
  
  <p>If I do the following: </p>
  
  <ol>
  <li>Select an item</li>
  <li>Programmaticlly deselect all: <code>this._grid.clearSelection();</code></li>
  <li>Programmatically select another item: <code>this._grid.select(row);</code></li>
  <li>Leaves two items looking selected.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/1KIM8.png" alt="enter image description here"></p>
  
  <p>The two items have different styles.  The incorrect one has:</p>
  
  <pre><code>.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
  </code></pre>
  
  <p>The correct one has:</p>
  
  <pre><code>.dgrid-selected
  </code></pre>
  
  <p>As before, when listening to the <code>dgrid-select</code> event, it reports the selected elements correctly.  </p>
  
  <hr>
  
  <p>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 <code>singular</code> but I haven't been able to figure out how/where to set this.  </p>
  
  <p>Info on singular: <a href="https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2" rel="nofollow noreferrer">https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2</a></p>