Drag and drop rows within grid to reorder rows.

[Sunita]

Hi,

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'

                  [selectionSettings]='selectOptions'>

            <e-columns>

                <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>

            </e-columns>

        </ejs-grid>

ts code-

import { RowDDService, SelectionService } from '@syncfusion/ej2-angular-grids';

import { orderDetails } from './data';

@Component({

    selector: 'app-test',

    templateUrl: './test.component.html',

    styleUrls: ['./test.component.css'],

    providers: [RowDDService, SelectionService]

})

ngOnInit() {

        this.data = orderDetails;

        this.selectOptions = { type: 'Single' };

    }

package.json

 "@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.

Thanks.

Sunita

Attachment: dragdropejsgrid_a56b0b40.zip

[Balaji Sekar]

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. 

 

Video Link: https://www.syncfusion.com/downloads/support/forum/150814/ze/RowDD-885134158.zip 

 

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Sunita]

Hi,

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.

Thanks,

Sunita

Attachment: dragdropvideo_63a44345.zip

[Balaji Sekar]

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. 

 

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

 

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.

 

(Or) 

 

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. 

 

Regards, 

Balaji Sekar.