DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Data Grid

    Drag & 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 property. The grids below have identifiers 1 and 2.

    3. Filter the grids to display different record sets
      Use the identifiers in the filterValue property 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 property 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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { const store = DevExpress.data.AspNet.createStore({ key: 'ID', loadUrl: `${url}/Tasks`, updateUrl: `${url}/UpdateTask`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); function getDataGridConfiguration(index) { return { height: 440, dataSource: { store, reshapeOnPush: true, }, showBorders: true, filterValue: ['Status', '=', index], rowDragging: { data: index, group: 'tasksGroup', onAdd, }, scrolling: { mode: 'virtual', }, columns: [{ dataField: 'Subject', dataType: 'string', }, { dataField: 'Priority', dataType: 'number', width: 80, lookup: { dataSource: priorities, valueExpr: 'id', displayExpr: 'text', }, }, { dataField: 'Status', dataType: 'number', visible: false, }], }; } $('#grid1').dxDataGrid(getDataGridConfiguration(1)); $('#grid2').dxDataGrid(getDataGridConfiguration(2)); function onAdd(e) { const key = e.itemData.ID; const values = { Status: e.toData }; store.update(key, values).then(() => { store.push([{ type: 'update', key, data: values, }]); }); } });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@2.9.2/js/dx.aspnet.data.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="tables" id="tables"> <div class="column"> <div id="grid1"></div> </div> <div class="column"> <div id="grid2"></div> </div> </div> </div> </body> </html>
    .tables { display: flex; } .column:first-child { width: 50%; padding-right: 15px; } .column:last-child { width: 50%; padding-left: 15px; }
    const url = 'https://js.devexpress.com/Demos/Mvc/api/DnDBetweenGrids'; const priorities = [{ id: 1, text: 'Low', }, { id: 2, text: 'Normal', }, { id: 3, text: 'High', }, { id: 4, text: 'Urgent', }];