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

Remote data and reordering row

Thread ID:





147119 Sep 2,2019 11:00 AM UTC Sep 3,2019 10:33 AM UTC React - EJ 2 1
Tags: Grid
Jonathan Payet
Asked On September 2, 2019 11:16 AM UTC


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.

Balaji Sekar [Syncfusion]
Replied On 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. 


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