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

Row drag and drop within the Grid using remote data in React Grid


I have issues with the remote data grid when i want to use Row Drag And Drop Within Grid . I understand params $top and $skip are here for the paginate but there is nothing more when i use the RowDD. Here an exemple : https://stackblitz.com/edit/react-1er1la 


import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective,Page, Selection, RowDD, Inject } from '@syncfusion/ej2-react-grids';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { orderDetails } from './data';
import { SampleBase } from './sample-base';
export class DragWithinGrid extends SampleBase {
constructor() {
this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';
this.data = new DataManager({ url: this.hostUrl + 'api/Orders', adaptor: new WebApiAdaptor });
render() {
return (<div className='control-pane'>
<div className='control-section'>
pageSettings={{ pageSize: 10 }}
selectionSettings={{ type: 'Multiple' }}>
<ColumnDirective field='OrderID' isPrimaryKey={true} headerText='Order ID' width='120' textAlign='Right'>ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'>ColumnDirective>
<ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' textAlign='Right'/>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'>ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'>ColumnDirective>
<Inject services={[RowDD, Selection, Page]}/>

render(<DragWithinGrid />, document.getElementById('sample'));

Any help will be appreciated.

1 Reply

BS Balaji Sekar Syncfusion Team September 3, 2019 10:33 AM UTC

Hi Jonathan, 

Greetings from the Syncfusion support, 

We have validated your query and we have created a sample with your requirement(drag and drop within Grid in WebApiAdaptor). In the below code example, we have bind the rowDrop event and send the ajax post and perform swapping in server side based on the rowDrop event arguments(from and drop index) and then refresh the grid to achieve your requirement.  

Please refer the below code example and sample for more information.  

 public render() { 
        return (<div className='control-section'> 
            <GridComponent ref={g => (this as any).grid = g} allowPaging={true} load={this.onload.bind(this)} allowRowDragAndDrop={true} rowDrop={this.dropAction.bind(this)} > 
                    <ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true} width='120' textAlign='Right'></ColumnDirective> 
                    <ColumnDirective field='CustomerID' headerText='CustomerID' width='150'></ColumnDirective> 
                    <ColumnDirective field='Freight' headerText='Freight' format="C2" width='120' textAlign='Right' /> 
                    <ColumnDirective field='EmployeeID' headerText='Employee ID' type='number' editType='numericedit' width='150'></ColumnDirective> 
                <Inject services={[Edit, Toolbar, RowDD]} /> 
public dropAction(args: any) { 
        args.cancel = true;         
        var ajax = new Ajax(); 
        ajax.type = "POST" 
        ajax.url = "/Home/Move" 
        var moveposition = { oldIndex: args.fromIndex, newIndex: args.dropIndex }; 
        ajax.data = JSON.stringify(moveposition); 
        ajax.onSuccess = () => {             
            (this as any).grid.refresh(); 

  // POST: api/Orders/Move  
        public void Move([FromBody] data data)  
            // you can also change the position of your data based on the from and drop index  
            var tmp = order[data.oldIndex];  
            order [data.oldIndex] = order [data.newIndex];  
            OrdersDetails.GetAllRecords()[data.newIndex] = tmp;  

Please get back to us, if you need further assistance. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon