Your search did not match any results.
Data Grid

Drag-and-Drop Between Two Grids

This functionality requires that data objects have a data field that identifies which grid they belong to. In this demo, this data field is Status.

To allow users to move rows between grids, follow these steps:

  1. Bind the grids to the same store
    The store should be able to update data. In this demo, the store is created using the createStore method (part of the DevExtreme.AspNet.Data extension). The specified updateUrl enables the store to update data.

  2. Specify grid identifiers
    Save them in the rowDragging.data option. The grids below have identifiers 1 and 2.

  3. Filter the grids to display different record sets
    Use the identifiers in the filterValue option to filter the grids. The grids below display only the records whose Status field equals the grid's identifier.

  4. Join the grids into one drag-and-drop group
    Set the rowDragging.group option to the same value for all grids to allow moving rows between them.

  5. Update the data field that specifies where the row belongs
    Implement the rowDragging.onAdd function. To access the target grid's identifier, use the toData function parameter. Call the store's update method to send this identifier to the server and push the same changes to the store on the client. The grids are refreshed automatically if you enable reshapeOnPush in the dataSource.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import Grid from './Grid.js'; const url = 'https://js.devexpress.com/Demos/Mvc/api/DnDBetweenGrids'; const tasksStore = AspNetData.createStore({ key: 'ID', loadUrl: `${url }/Tasks`, updateUrl: `${url }/UpdateTask`, onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; } }); class App extends React.Component { constructor(props) { super(props); } render() { return ( <div className="tables"> <div className="column"> <Grid tasksStore={tasksStore} status={1} /> </div> <div className="column"> <Grid tasksStore={tasksStore} status={2} /> </div> </div> ); } } export default App;
import React from 'react'; import DataGrid, { Column, RowDragging, Scrolling, Lookup } from 'devextreme-react/data-grid'; class Grid extends React.Component { constructor(props) { super(props); this.priorities = [{ id: 1, text: 'Low' }, { id: 2, text: 'Normal' }, { id: 3, text: 'High' }, { id: 4, text: 'Urgent' }]; this.filterExpr = ['Status', '=', this.props.status]; this.onAdd = this.onAdd.bind(this); this.dataSource = { store: this.props.tasksStore, reshapeOnPush: true }; } onAdd(e) { var key = e.itemData.ID, values = { Status: e.toData }; this.props.tasksStore.update(key, values).then(() => { this.props.tasksStore.push([{ type: 'update', key: key, data: values }]); }); } render() { return ( <DataGrid dataSource={this.dataSource} height={440} showBorders={true} filterValue={this.filterExpr} > <RowDragging data={this.props.status} group="tasksGroup" onAdd={this.onAdd} /> <Scrolling mode="virtual" /> <Column dataField="Subject" dataType="string" /> <Column dataField="Priority" dataType="number" width={80} > <Lookup dataSource={this.priorities} valueExpr="id" displayExpr="text" /> </Column> <Column dataField="Status" dataType="number" visible={false} /> </DataGrid> ); } } export default Grid;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.tables { display: flex; } .column:first-child { width: 50%; padding-right: 15px; } .column:last-child { width: 50%; padding-left: 15px; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', meta: { 'devextreme-aspnet-data-nojquery': { 'esModule': true } }, map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.5.0', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js', 'tslib': 'npm:tslib@1.6.1', '@aspnet/signalr': 'npm:@aspnet/signalr@1.0.0/dist/cjs/index.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });