Disable drag and drop

[Naresh Singh]

Hi,

I'm using syncfusion-tree-grid version 19.2.60 and angular version 10 in my project.

I working on feature, in which on click of button, User can move item up and down. so I'm using this API 

reorderRows .

Issues:  but  to use reorderRows API, I need to keep enabled allowRowDragAndDrop = true.  
              which we dont want. we dont want, user can drag and drop items in tree-grid.

Is there way we can use reorderRows API without enabling   allowRowDragAndDrop property of treegrid.

Thanks,
Naresh Singh

[Pon Selva Jeganathan]

Hi Naresh,   

 

Thanks for contacting syncfusion forum. 

 

Query: Disable drag and drop

The drag and drop property must be enabled when reordering rows.

Method 1:

We suggest you use the CSS style to remove the drag and drop icon.

Please refer to the below code snippet,

 

<style>  

.e-treegrid .e-icon-rowdragicon{  

      display: none;  

    }  

</style>  

  

  

Sample Link:-  https://stackblitz.com/edit/angular-phyqnb-1gw4kg?file=app.component.ts

Method 2:  

 

We suggest you to set allowRowDragAndDrop property of Tree Grid to false after reordering as shown in the below code example,  

  

<button ejs-button (click) = "reorder($event)" > Reorder Rows</button >  

    <ejs-treegrid #treegrid childMapping="subtasks" [treeColumnIndex] = "1"[selectionSettings] = "selectionsettings"[allowRowDragAndDrop] = "true" >  

        <e-columns>  

            .......... ..  

        </e-columns>   

              </ ejs-treegrid >  

……………… . .  

  

    reorder(args: any) {  

        this.treegrid.reorderRows([1], 3, "below");   

        this.treegrid.allowRowDragAndDrop = false; // block drag and drop property of treegrid here  

  

    }  

}  

  

Please refer to the below sample link,  

 https://stackblitz.com/edit/angular-phyqnb-39z6mo?file=app.component.ts 

Kindly get back to us for further assistance. 

Regards,   

Pon selva