DataGrid not setting "colSpan" correctly while toggling rowDragAndDrop

[Marko Bezjak]

Hello,

I think I already pointed this out on GitHub for a previous version of Grid but was later fixed for allowRowDragAndDrop = TRUE. Now the problem has returned while initially the drag and drop is allowed on grid but then turned off.

I have modified your example to show the problem: https://stackblitz.com/edit/angular-3aqxw4-tmy2oy?file=app.component.ts

To reproduce: 

1.) press the button "toggleDragDrop"

You should see that "colSpan" attribute is not correctly updated.

UPDATE: "colSpan" is not the problem. The problem is that Grid Doesn't remove / hide the  element with class .e-rowdragheader.

BR. Marko

Edit: I would also like to point out that something tends to go wrong while hiding / showing columns with "ColumnChooser". I did not prepare the example but will do if you are unable to reproduce the scenario.

[Thavasianand Sankaranarayanan]

Hi Marko, 

Thanks for contacting Syncfusion support. 

We have already fixed the “Need to provide the support the row drag and drop while dynamically enable/disable that feature” issue in our v17.2.36 version and we suggest you to update the package to the latest version. Also we have prepared a sample based on your requirement with column chooser but it is working fine at our end. Please refer to the below code example and sample link for more information. 

[component.ts] 

@Component({ 

    selector: 'app-root', 

    template: `<button (click)='toggleDragDrop($event)'>toggleDragDrop</button> 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' showColumnChooser='true' [allowResizing]="true" [allowRowDragAndDrop]='allowDragDrop' 

    [allowGrouping]="true"[allowReordering]="true" 

    > 

        .  .  . 

    </ejs-grid>`, 

    providers: [ToolbarService, EditService, PageService] 

}) 

export class AppComponent { 

   

    public ngOnInit(): void { 

        this.toolbar = ['Add', 'Edit', 'Delete','ColumnChooser']; 

        .  .  . 

    } 

   toggleDragDrop(args) { 

      this.grid.allowRowDragAndDrop = !this.grid.allowRowDragAndDrop; 

      console.log(this.allowDragDrop); 

      this.grid.refresh(); 

    } 

} 

Sample: https://stackblitz.com/edit/angular-1ugb6g-km35fe?file=app.component.ts 

If you are still facing the issue please provide the below details that will be helpful for us to provide a better solution as early as possible. 

1. Share the video demo of your issue
2. Share the issue reproducible sample if possible.
3. Share the stack trace if any script error.
4. Please ensure the issue with latest version.

Regards, 

Thavasianand S. 

[Marko Bezjak]

Yes! It works nice. Thank you for your good work and fast updates!

Regards, Marko

[Thavasianand Sankaranarayanan]

Hi Marko, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.