Remote data and reordering row

Thread ID:	Created:	Updated:	Platform:	Replies:
147119	Sep 2,2019 11:00 AM UTC	Sep 3,2019 10:33 AM UTC	React - EJ 2	1

Subscribe to this post

Tags: Grid

Jonathan Payet

Asked On September 2, 2019 11:16 AM UTC

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

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

<GridComponent

dataSource={this.data}

allowRowDragAndDrop={true}

allowPaging={true}

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='ShipCity' headerText='Ship City' width='150'>ColumnDirective>

<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'>ColumnDirective>

ColumnsDirective>

GridComponent>

div>

div>);

}

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

Any help will be appreciated.

Reply | Reply with quote

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.

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

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

Reply | Reply with quote

Remote data and reordering row

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US