We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DataGrid not setting "colSpan" correctly while toggling rowDragAndDrop

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.

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 31, 2019 07:14 AM UTC

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(); 
    } 


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. 



MB Marko Bezjak July 31, 2019 11:46 AM UTC

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

Regards, Marko


TS Thavasianand Sankaranarayanan Syncfusion Team August 1, 2019 05:23 AM UTC

Hi Marko, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon