Disable Drag Selection

[Sergio Navarro]

Hi,

We are trying to disable multiple row selection using drag selection (mouse drag). Our grid component allows row drag and drop and multiple selection option type, this configuration enables automatically drag selection.

This documentation explains how to enable or disable it but allowDragSelection option does not exist on the last Syncfusion versions.

Example: https://stackblitz.com/edit/angular-9pvqj1-deysvj?file=src%2Fapp.component.ts,src%2Fapp.component.html

[Harini Kannan]

Hi Sergio,

 

Query: Disable Drag Selection

 

• The documentation link you provided for the ej1 grid has different selection settings compared to ej2 grid, and therefore, the allowDragSelection option is not supported in ej2. 
• The default behavior for multi-row selection is achieved by dragging the mouse over the desired rows.
• Dragging multiple selected rows results in multi-row drag and drop functionality. 
• However, if you require single row drag and drop, we have provided this option using the drag icon. 

Please get back to us if you have any concern.

 

Regards,

Harini

[Sergio Navarro]

Hi Harini,

On my ej2 grid multi-row selection is achieved by a checkbox. The default behavior that you mention "multi-row selection is achieved by dragging the mouse over the desired rows" does not meet our requirements so we want to disable it. The user can drag and drop multiple rows by selecting it with the checkbox and then using the drag icon of one of them. 

​​

Please tell me if exists any option to disable it or a feasible workaround.

Regards,

Sergio

 

Updated example: https://stackblitz.com/edit/angular-9pvqj1-deysvj?file=src%2Fapp.component.ts,src%2Fapp.component.html

[Harini Kannan]

Hi Sergio,

Query: Disable Drag Selection

We were able to fulfil your request after reviewing your query and we have achieved your requirement by using this event rowSelecting().This event prevents multiple row drag and drop, and allows us to select multiple rows using a checkbox and drag using a drag icon. We provided a sample and code snippet for your reference.

 

 rowDeselecting(args) {

    if (!args.isInteracted) {

      args.cancel = true;

    }

  }

  rowSelecting(args) {

    if (!args.isInteracted) {

      args.cancel = true;

    }

  }

Sample : https://stackblitz.com/edit/angular-vdgz7m-anh2ur?file=app.component.ts

We hope this solution meets your needs. Please get back to us if you have any concern.

Regards,

Harini

[Sergio Navarro]

Hi Harini,

I have implemented the workaround on our project but doesn't work. The isInteracted attribute is set to true when the user selects multiple rows dragging the mouse over the desired rows but the event is not canceled.

The example that you provide me does not use "rowSelecting" event. Also, you don't allow row drag and drop with multiple selection option type. This configuration does not enable drag selection.

Please, try to use my own example: 

https://stackblitz.com/edit/angular-9pvqj1-deysvj?file=src%2Fapp.component.ts

Regards,

Sergio

[Harini Kannan]

Hi Sergio,

 

Query : Disable Drag Selection

 

Sorry for the inconvenience caused.

 

From your previous update, we understand that you are facing issues with "Disable Drag Selection " . So, we provided a sample with "rowSelecting" event and it enables to select multiple rows using a checkbox and drag them with a drag icon. We hope this solution meets your needs.

 

Sample: https://stackblitz.com/edit/angular-9pvqj1-gqe7hd?file=src%2Fapp.component.ts

 

Please get back to us if you have any concern.

 

Regards,

Harini 

[Sergio Navarro]

Hi Harini,

Thanks for your time.

We have implemented the workaround on our project and the drag selection event is correctly canceled. Unfortunately, this conflicts with other features of our app (for example when we use selectRowsByRange method). Also, the drag selection continues enabled but only avoids row selection, this behavior can look like a bug in our platform.

Are you going to include an option to disable it in future Syncfusion versions? Can you add this feature to your roadmap?

Regards,

Sergio

[Rajapandi Ravi]

Sergio,

Before we start providing solution to your query, we need some information for our clarification. So, please share the below details that will be helpful for us to provide better solution.

1)          Share your issue scenario in video demonstration.

2)          Share the details about where you are using the selectRowsByRange() method and what problem you are facing.

3)          If possible, please try to reproduce the issue with our above attached sample.

Regards,

Rajapandi R