Demos
Grid(React)
Events
Drag and Drop

Dragging Rows from the FlexGrid (React)

You can use the HTML5 drag/drop API to implement row dragging from, into, or between FlexGrid controls. This simple example shows how you can drag rows from the grid into arbitrary elements. You can easily extend this to support move operations (by removing the row from the source grid when the operation is completed) or dropping into grids (by detecting the drop position and inserting new rows into the target grid).

Learn about FlexGrid | FlexGrid API Reference

This example uses React.

JavaScript
Angular
Vue
React
app.jsx
index.html
app.css
data.jsx
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjGrid from '@mescius/wijmo.react.grid';
import * as wjcGrid from '@mescius/wijmo.grid';
import './app.css';
import { data } from './data';
function App() {
    const flexRef = useRef(null);
    const initGrid = useEvent((grid) => {
        flexRef.current = grid;
        makeDragSource(flexRef.current);
        makeDropTarget(document.querySelector("#theTarget"));
    });
    const makeDragSource = (s) => {
        s.itemFormatter = (panel, r, c, cell) => {
            if (panel.cellType == wjcGrid.CellType.RowHeader) {
                cell.textContent = (r + 1).toString();
                cell.draggable = true;
            }
        };
        // disable built-in row drag/drop
        s.addEventListener(s.hostElement, "mousedown", (e) => {
            if (s.hitTest(e).cellType == wjcGrid.CellType.RowHeader) {
                e.stopPropagation();
            }
        }, true);
        // handle drag start
        s.addEventListener(s.hostElement, "dragstart", (e) => {
            let ht = s.hitTest(e);
            if (ht.cellType == wjcGrid.CellType.RowHeader) {
                s.select(new wjcGrid.CellRange(ht.row, 0, ht.row, s.columns.length - 1));
                e.dataTransfer.effectAllowed = "copy";
                e.dataTransfer.setData("text", ht.row.toString());
            }
        }, true);
    };
    const makeDropTarget = (s) => {
        s.addEventListener("dragover", (e) => {
            let dragRow = e.dataTransfer.getData("text");
            if (dragRow != null) {
                e.dataTransfer.dropEffect = "copy";
                e.preventDefault();
            }
        });
        s.addEventListener("drop", (e) => {
            let dragRow = e.dataTransfer.getData("text");
            if (dragRow != null) {
                let item = flexRef.current.rows[parseInt(dragRow)].dataItem;
                alert("thanks for dropping row " +
                    JSON.stringify(item) +
                    " here.");
                e.preventDefault();
            }
        });
    };
    return (<div className="container-fluid">
      <p>Drag rows from the grid by the row header:</p>
      <wjGrid.FlexGrid initialized={initGrid} itemsSource={data}/>
      <p>And drop them here:</p>
      <div id="theTarget" className="theTarget">Drop rows here...</div>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useRef } from 'react'; import useEvent from 'react-use-event-hook'; import * as wjGrid from '@mescius/wijmo.react.grid'; import * as wjcGrid from '@mescius/wijmo.grid'; import './app.css'; import { data } from './data'; function App() { const flexRef = useRef(null); const initGrid = useEvent((grid) => { flexRef.current = grid; makeDragSource(flexRef.current); makeDropTarget(document.querySelector("#theTarget")); }); const makeDragSource = (s) => { s.itemFormatter = (panel, r, c, cell) => { if (panel.cellType == wjcGrid.CellType.RowHeader) { cell.textContent = (r + 1).toString(); cell.draggable = true; } }; // disable built-in row drag/drop s.addEventListener(s.hostElement, "mousedown", (e) => { if (s.hitTest(e).cellType == wjcGrid.CellType.RowHeader) { e.stopPropagation(); } }, true); // handle drag start s.addEventListener(s.hostElement, "dragstart", (e) => { let ht = s.hitTest(e); if (ht.cellType == wjcGrid.CellType.RowHeader) { s.select(new wjcGrid.CellRange(ht.row, 0, ht.row, s.columns.length - 1)); e.dataTransfer.effectAllowed = "copy"; e.dataTransfer.setData("text", ht.row.toString()); } }, true); }; const makeDropTarget = (s) => { s.addEventListener("dragover", (e) => { let dragRow = e.dataTransfer.getData("text"); if (dragRow != null) { e.dataTransfer.dropEffect = "copy"; e.preventDefault(); } }); s.addEventListener("drop", (e) => { let dragRow = e.dataTransfer.getData("text"); if (dragRow != null) { let item = flexRef.current.rows[parseInt(dragRow)].dataItem; alert("thanks for dropping row " + JSON.stringify(item) + " here."); e.preventDefault(); } }); }; return (<div className="container-fluid"> <p>Drag rows from the grid by the row header:</p> <wjGrid.FlexGrid initialized={initGrid} itemsSource={data}/> <p>And drop them here:</p> <div id="theTarget" className="theTarget">Drop rows here...</div> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Wijmo FlexGrid Drag and Drop Events</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
.wj-flexgrid { max-height: 200px; margin-bottom: 12px; } .theTarget { height: 100px; background-color: #e0e0e0; padding: 6px; border-radius: 2px; }
function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } export const data = getData();
(function (global) { window.process = { env: { NODE_ENV: "production" } } System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/index.js', 'react-dom': 'npm:react-dom/index.js', 'react-dom/client': 'npm:react-dom/client.js', "scheduler": "npm:scheduler/index.js", 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);