The Grid Row drag and drop allows you to drag grid rows and drop to another Grid or custom component.
To enable Row drag and drop in the Grid, set the allowRowDragAndDrop
to true.
The target component on which the Grid rows to be dropped can be set by using
targetID
.
To use Row Drag and Drop, you need to inject RowDD module in Grid.
import * as React from 'react';
import { Target } from './DestGrid';
import { Source } from './SourceGrid';
export default class App extends React.Component {
render() {
return (<div>
<Source />
<Target />
</div>);
}
}
import { GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export class Target extends React.Component {
constructor() {
super(...arguments);
this.data = [];
this.rowDropSettings = { targetID: 'Grid' };
this.selectionSettings = { type: 'Multiple' };
}
render() {
return <GridComponent id="DestGrid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}>
<Inject services={[RowDD, Selection]}/>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='150'/>
<ColumnDirective field='ShipCity' width='100'/>
<ColumnDirective field='ShipName' width='150'/>
</ColumnsDirective>
</GridComponent>;
}
}
import { GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export class Source extends React.Component {
constructor() {
super(...arguments);
this.data = data.slice(0, 5);
this.rowDropSettings = { targetID: 'DestGrid' };
this.selectionSettings = { type: 'Multiple' };
this.style = { marginBottom: '20px' };
}
render() {
return <GridComponent id="Grid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings} style={this.style}>
<Inject services={[RowDD, Selection]}/>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='150'/>
<ColumnDirective field='ShipCity' width='100'/>
<ColumnDirective field='ShipName' width='150'/>
</ColumnsDirective>
</GridComponent>;
}
}
import * as React from 'react';
import { Target } from './DestGrid';
import { Source } from './SourceGrid';
export default class App extends React.Component<{}, {}>{
public render () {
return (<div>
<Source/>
<Target/>
</div>)
}
}
import { GridComponent, Inject, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export class Target extends React.Component<{}, {}>{
public data: object[] = [];
public rowDropSettings: RowDropSettingsModel = { targetID: 'Grid' };
public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
public render() {
return <GridComponent id="DestGrid" dataSource={this.data} allowRowDragAndDrop={true}
rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}>
<Inject services={[RowDD, Selection]}/>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='150'/>
<ColumnDirective field='ShipCity' width='100'/>
<ColumnDirective field='ShipName' width='150'/>
</ColumnsDirective>
</GridComponent>
}
}
import { GridComponent, Inject, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export class Source extends React.Component<{}, {}>{
public data: object[] = data.slice(0, 5);
public rowDropSettings: RowDropSettingsModel = { targetID: 'DestGrid' };
public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
public style = { marginBottom: '20px' };
public render() {
return <GridComponent id="Grid" dataSource={this.data} allowRowDragAndDrop={true}
rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings} style={this.style}>
<Inject services={[RowDD, Selection]}/>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='150'/>
<ColumnDirective field='ShipCity' width='100'/>
<ColumnDirective field='ShipName' width='150'/>
</ColumnsDirective>
</GridComponent>
}
}
- Selection feature must be enabled for row drag and drop.
- Multiple rows can be selected by clicking and dragging inside the Grid. For multiple row selection, the
selectionSettings.type
property must be set to Multiple.