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

[Jonathan Payet]

Hi,

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 

or 

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() {

super(...arguments);

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

<GridComponent

dataSource={this.data}

allowRowDragAndDrop={true}

allowPaging={true}

pageSettings={{ pageSize: 10 }}

selectionSettings={{ type: 'Multiple' }}>

<ColumnsDirective>

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

ColumnsDirective>

<Inject services={[RowDD, Selection, Page]}/>

GridComponent>

div>

div>);

}

}

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

Any help will be appreciated.

[Balaji Sekar]

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.  

[FetchEmployee.tsx]   

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

                <ColumnsDirective> 

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

                </ColumnsDirective> 

                <Inject services={[Edit, Toolbar, RowDD]} /> 

            </GridComponent> 

        </div>) 

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.send(); 

        ajax.onSuccess = () => {             

            (this as any).grid.refresh(); 

        }  

    } 

[HomeController.cs] 

  // POST: api/Orders/Move  

        [HttpPost]  

        [Route("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;  

        }  

Reference Link: https://stackoverflow.com/questions/450233/generic-list-moving-an-item-within-the-list   

 

Sample link: https://www.syncfusion.com/downloads/support/forum/147119/ze/React-ASP.NetCore-UrlAdaptor1187029306.zip 

 

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

 

Regards, 

Balaji Sekar.