Shift to select Multiple Items at once

[shyamal890]

Usecase:

1. Select first item.
2. Hold Shift button.
3. Select last item.
4. Release Shift button.

All of the in-between items should be selected.

[d3lm]

Yep, great feature. The shift button is however taken already. We would have to find another key for this. Also, do you want to give it a try and send a PR? I am happy to review your code.

[shyamal890]

Shift button globally (excel, other apps) is being utilized to multi select items. So may be we can think about incorporating it for selecting all items in between.

[d3lm]

Yea I know. But this library works a little bit different. I mean how would that work if you keep the extended selection mode (currently shift) where items are not selected right away but only selected when you release the mouse button. I find this actually pretty useful. The problem is that, you don't want all items selected in between when you want to use this extended mode. So how would you differentiate between those two selections?

I think if we want this, then we have to fundamentally re-work the selection modes and how this lib works. The way it is currently implemented, it would clash with the feature you suggested.

But I totally agree, that this is a useful feature. Maybe I should streamline the behavior with how OS's do this, or other tools like Excel.

[d3lm]

Also, on a Mac you cannot select one, press shift, select another item and all items in between are selected, at least if you are not in the list view. I am not sure how Windows does this. I'd say this is not really common to have both behaviors on shift.

@timdeschryver What do you think?

[shyamal890]

Yea I know. But this library works a little bit different. I mean how would that work if you keep the extended selection mode (currently shift) where items are not selected right away but only selected when you release the mouse button. I find this actually pretty useful. The problem is that, you don't want all items selected in between when you want to use this extended mode. So how would you differentiate between those two selections?

I find shift to select all items in-between more useful.

[d3lm]

Well I think that really depends on the use case and might also be a personal preference. I am not sure if this should be the default though. Asking for input from @timdeschryver on this one.

One solution could be to have both but one of the behaviors is hidden behind a flag. So the way the lib handles selection right now would be the default and you could enable the proposed feature with a flag called disableExtendedSelection or something like that. This is one idea.

Any other ideas?

[d3lm]

Or maybe not a flag but specify the behavior in the config that is passed to the DragToSelectModule.

[user23022]

+1
Click, shift + click is the one thing I'm missing in this module.

[user23022]

I created my own implementation for this.

Add a click listener on the list item:

<li *ngFor="let item of items" [dtsSelectItem]="item" (click)="handleClick($event, item)">
...
</li>

Add clickhandler to component class:

@ViewChild(SelectContainerComponent, { static: true }) selectContainer: SelectContainerComponent;

private shiftClickStartIndex: number;

public handleClick(event, item): void {
    // Register index of latest item clicked before pressing shift
    if (!event.shiftKey) {
      this.shiftStartIndex = item.index;
    }

    // Select all items with who have an index between start and clicked index 
    if (event.shiftKey) {
      const shiftHighIndex = this.shiftClickStartIndex > item.index ? this.shiftClickStartIndex : item.index;
      const shiftLowIndex = shiftHighIndex === this.shiftClickStartIndex ? item.index : this.shiftClickStartIndex;
      this.selectContainer.clearSelection();
      this.selectContainer.selectItems(({ index }) => index >= shiftLowIndex && index <= shiftHighIndex);
    }
  }

I've taken my Ubuntu "Files" app as an example. When you click an item and shift + click later, all items in between are selected. But when you shift + click again, notice that the first item you clicked is memorized. The selection always starts with the item you clicked without shift last.

In my example, the item object has the index as a property. But you could also pass handleClick the index from the ngFor loop.

I've tried performing a deselectItems for all indexes outside the range, but for some reason I need to perform clearSelection. But it works.

This works together with the shift + drag as well.

[d3lm]

So there was another request (#87) for this feature and I think we should really go forward with this and add it to the library.

Is anyone willing to work on this and send a PR? That'd be awesome, because right now I am quite busy, but I can try to find some time for it. This shouldn't be too difficult and I would go for a solution similar to how this works on Windows. Basically overload the shift key so that you can select one item and if the user doesn't drag and clicks on another item, we select all items in between those.

Sounds good?

[user23022]

Sounds good. Please consider how Windows / Ubuntu implement this:

When you click an item and shift + click later, all items in between are selected. But when you shift + click again, notice that the first item you clicked is memorized. The selection always starts with the item you clicked without shift last.

[d3lm]

Yep, makes sense. Thanks!

[d3lm]

I have just pushed a PR that introduces the range selection via shift. @user23022 @shyamal890 Would you mind checking out the PR to verify if the behavior is what you are expecting? You can clone the repo, check out the PR locally, then install the dependency and serve the app. Would be great to get feedback on this before I merge this.

[d3lm]

This is now implemented in latest master. I ll cut a release soon. I am awaiting one outstanding PR and then I ll publish a new version. You can already check it out on https://d3lm.github.io/ngx-drag-to-select/.