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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DataGrid not setting "colSpan" correctly while toggling rowDragAndDrop

Thread ID:





146297 Jul 30,2019 09:24 AM UTC Aug 1,2019 05:23 AM UTC Angular - EJ 2 3
Tags: Grid
Marko Bezjak
Asked On July 30, 2019 09:33 AM UTC


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 [Syncfusion]
Replied On 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. 

    selector: 'app-root', 
    template: `<button (click)='toggleDragDrop($event)'>toggleDragDrop</button> 
    <ejs-grid #grid [dataSource]='data' allowPaging='true' showColumnChooser='true' [allowResizing]="true" [allowRowDragAndDrop]='allowDragDrop' 
        .  .  . 
    providers: [ToolbarService, EditService, PageService] 
export class AppComponent { 
    public ngOnInit(): void { 
        this.toolbar = ['Add', 'Edit', 'Delete','ColumnChooser']; 
        .  .  . 

   toggleDragDrop(args) { 
      this.grid.allowRowDragAndDrop = !this.grid.allowRowDragAndDrop; 

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.

Thavasianand S. 

Marko Bezjak
Replied On July 31, 2019 11:46 AM UTC

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

Regards, Marko

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 
Thavasianand S.  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon