Selecting lines deselect previous ones: RowDragAndDrop + CheckboxSelection

[Sergio Navarro]

Hello team,

We are using Syncfusion grids with CheckboxSelection and RowDragAndDrop options enabled. Unfortunately, sometimes selecting new lines deselects previous ones. The method getSelectedRecords returns an empty array when this happens.

I have replicated the error on this StackBlitz:  

https://stackblitz.com/edit/angular-zxqbdq-bwlkrs?file=app.component.ts,app.component.html

If you provide me an email I can send you some videos showing this behavior.

Environment:

    "@angular/core": "13.3.11",

    "@syncfusion/ej2-angular-grids": "19.4.38",

    "@syncfusion/ej2-angular-inputs": "19.4.38",

    "@syncfusion/ej2-angular-navigations": "19.4.38",

    "@syncfusion/ej2-angular-notifications": "19.4.38",

    "@syncfusion/ej2-angular-popups": "19.4.38",

Thanks ,

Sergio.

[Rajapandi Ravi]

Hi Sergio,

Greetings from Syncfusion support

We have checked your shared information and we could see that you are facing the row deselection while selecting the new row. You can achieve your requirement by setting persistSelection as true. If ‘persistSelection’ set to true, then the Grid selection is persisted on all operations. For persisting selection in the Grid, any one of the columns should be enabled as a primary key. Please refer the below code example and sample for more information.

App.component.ts

 

export class AppComponent implements OnInit {

  data: Object[] = [];

  initialPage: Object;

  selectOptions: any;

 

  ngOnInit(): void {

    this.data = [

      { OrderID: '1', ShipCity: 'London' },

      { OrderID: '2', ShipCity: 'Madrid' },

      { OrderID: '3', ShipCity: 'Lisboa' },

      { OrderID: '4', ShipCity: 'Barcelona' },

      { OrderID: '5', ShipCity: 'Munich' },

      { OrderID: '6', ShipCity: 'Berlin' },

    ];

    this.selectOptions = { persistSelection: true };

  }

}

 

App.component.html

 

<ejs-grid

    [dataSource]="data"

    [selectionSettings]="selectOptions"

    [allowRowDragAndDrop]="true"

    height="315px"

  >

    <e-columns>

      <e-column type="checkbox" width="50"></e-column>

      <e-column

        field="OrderID"

        isPrimaryKey='true'

        headerText="Order ID"

        textAlign="Right"

        width="120"

      ></e-column>

      <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>

    </e-columns>

  </ejs-grid>

 

Sample: https://stackblitz.com/edit/angular-zxqbdq-sdr274?file=app.component.ts,app.component.html,package.json

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/selection/check-box-selection/#checkbox-selection

Screenshot:

Regards,

Rajapandi R

[Sergio Navarro]

Hi  Rajapandi,

Thanks for your answer. Unfortunately, the error also happens on the sample project.

If you provide me an email, I will send you a couple of videos showing the error. (I can not attach videos to the post 😫)

Thanks ,

Sergio.

[Suganya Gopinath]

Hi Sergio,

Please send the video in one drive and share the credentials to [email protected] with the forum ID in subject line. 

Regards,

Suganya Gopinath.

[Rajapandi Ravi]

Hi Sergio,

Thanks for your update

We have checked your shared information in the ticket, you are using a syncfusion package version 19.4.38, Since you are using an older package version in your application, we suspect that it may cause some problems in the Grid. So, we suggest you use the latest syncfusion package version 20.3.47 and ensure that the problem was resolving or not.

Documentation: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/

If you still face the problem, please share the below details that will be helpful for us to provide better solution.

1)            Please share your complete Grid rendering code, we would like to check and based on your application we will create a sample and validate at our end.

2)            If possible, please try to reproduce the issue with sample which was shared in our previous update.

3)            Please confirm your syncfusion package version.

Regards,

Rajapandi R

[Sergio Navarro]

Hi  Rajapandi,

Thanks for your fast reply.

I have created a Stackblitz using the last version (20.3.47) and uploaded a new video called "v20.3.47.mp4" to the one drive folder. Setting persistSelection enabled does not fix the error.

Sample: https://stackblitz.com/edit/angular-joxzbn-hxs1wf?file=app.component.html,package.json,app.component.ts

Regards ,

Sergio

[Rajapandi Ravi]

Hi Sergio,

Thanks for your update

We have prepared a local sample and tried to reproduce your reported problem at our end, but it was unsuccessful. Please check and ensure whether the below local sample was working fine in your machine or not.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/checkboxrowdrag503557683.zip

If you still face the issue, please share the below details that will be helpful for us to validate the problem.

1)         Please share the details about on what browser you are facing the problem, and also please ensure with alternate browser and incognito window.

2)         Please confirm which type of OS you are using in your machine.      

Regards,

Rajapandi R