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

Drag and drop rows within grid to reorder rows.

Thread ID:





150814 Jan 20,2020 10:58 AM UTC Jan 24,2020 11:37 AM UTC AngularJS 3
Tags: ejGrid
Asked On January 20, 2020 10:58 AM UTC


In my angular application I am using ejs-grid, now I want to use the drag and drop functionality to reorder the rows within grid.
Below is the code I am using - but its not working. When clicking on drag , I can drag the row but when dropping it on another row it doesn't highlights the drop area instead it shows disabled cursor and drop doesn't work.

html code-
     <ejs-grid [dataSource]='data' height='350' [allowRowDragAndDrop]='true'
                <e-column field='OrderID' isPrimaryKey='true' headerText='Order ID' width='80' textAlign='Right'></e-column>
                <e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='100' format="yMd" textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='130'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width='130'></e-column>

ts code-
import { RowDDService, SelectionService } from '@syncfusion/ej2-angular-grids';
import { orderDetails } from './data';
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css'],
    providers: [RowDDService, SelectionService]

ngOnInit() {
        this.data = orderDetails;
        this.selectOptions = { type: 'Single' };

 "@syncfusion/ej2-angular-buttons": "^17.4.43",
    "@syncfusion/ej2-angular-calendars": "^17.4.43",
    "@syncfusion/ej2-angular-dropdowns": "^17.4.43",
    "@syncfusion/ej2-angular-grids": "^17.4.43",
    "@syncfusion/ej2-angular-heatmap": "^17.4.43",
    "@syncfusion/ej2-angular-inputs": "^17.4.43",
    "@syncfusion/ej2-angular-lists": "^17.4.43",
    "@syncfusion/ej2-angular-navigations": "^17.4.43",
    "@syncfusion/ej2-angular-popups": "^17.4.43",
    "@syncfusion/ej2-angular-richtexteditor": "^17.4.43",
    "@syncfusion/ej2-angular-schedule": "^17.4.43",
    "@syncfusion/ej2-base": "^17.4.43",

Can you please assist me in implementing drag drop row functionality within grid?

Help much appreciated.


Attachment: dragdropejsgrid_a56b0b40.zip

Balaji Sekar [Syncfusion]
Replied On January 21, 2020 11:16 AM UTC

Hi Sunita, 
Greetings from Syncfusion Supoort. 
Query: drag drop row functionality within grid? 
We have validated your query and prepared a sample based on your requirement “drag drop row functionality within grid”. Row Drag and Drop functionality within Grid works fine in our end. We have also included a video and a sample link for more information. 
Please get back to us if you need further assistance. 
Balaji Sekar. 

Replied On January 23, 2020 05:55 AM UTC


I have seen the sample and its working there. But the problem is that its not working at our end. Could you please let me know if I am missing anything here?

I have attached video to show how its behaving in our application.


Attachment: dragdropvideo_63a44345.zip

Balaji Sekar [Syncfusion]
Replied On January 24, 2020 11:37 AM UTC

Hi Sunita, 
Thanks for your update. 
We've reviewed your recorded video but unfortunately we haven't been able to get your missed one from our end. From video, we confirm that the drag-and-drop feature works like breaking the default functionality that is the drop icon is not available and the row over the row will be disabled. Its not our drag and drop functionality and our side your reported issue is not reproduced. So we assume this issue may occurs in CSS Customization. 
To find issue root cause, Please share your below details, 
  1. Are you using any style references ? If yes, share it.
  2. Are you render grid inside any component ? If yes, share grid rendering view.
  3. Are you using any CSS customization? Because you customized header content So, we suspect that.
  4. If possible, Reproduce the issue in above sample
  5. If possible, Share your complete application.
We can schedule a web meeting with you to look into the reported problem in your machine. Out team will schedule the call as per your convenience. Please confirm your availability for the call.  
Please get back to us , if you need any further assistance. 
Balaji Sekar. 


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