Drag & Drop

FlexSheet supports dragging and dropping the columns or rows into other columns or rows. FlexSheet not only copies or moves the data of the cells, but also copies or moves the style of the cells. When you drag and drop columns/rows without pressing any key, it will move the selected columns or rows into the target columns or rows. When you drag and drop columns/rows with 'Ctrl' key pressed, it will copy the selected columns or rows into the target columns or rows. When you drag and drop columns/rows with 'Shift' key pressed, it will change the position of the selected columns or rows with the target columns or rows.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjFlexSheet from '@grapecity/wijmo.grid.sheet'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let dragDropSheet = new wjFlexSheet.FlexSheet('#dragDropSheet'); dragDropSheet.addUnboundSheet('unbound', 12, 8); dragDropSheet.deferUpdate(() => { let colIdx, rowIdx; for (colIdx = 0; colIdx < dragDropSheet.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < dragDropSheet.rows.length; rowIdx++) { dragDropSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } dragDropSheet.applyCellsStyle({ fontWeight: 'bold' }, [new wjGrid.CellRange(0, 0, 5, 0), new wjGrid.CellRange(6, 1, 11, 1)]); dragDropSheet.applyCellsStyle({ textDecoration: 'underline' }, [new wjGrid.CellRange(0, 2, 5, 2), new wjGrid.CellRange(6, 3, 11, 3)]); dragDropSheet.applyCellsStyle({ fontStyle: 'italic' }, [new wjGrid.CellRange(0, 4, 5, 4), new wjGrid.CellRange(6, 5, 11, 5)]); dragDropSheet.applyCellsStyle({ format: 'c2' }, [new wjGrid.CellRange(0, 0, 5, 7)]); dragDropSheet.applyCellsStyle({ backgroundColor: '#4488CC' }, [new wjGrid.CellRange(0, 0, 11, 0), new wjGrid.CellRange(0, 2, 11, 2), new wjGrid.CellRange(0, 4, 11, 4)]); dragDropSheet.applyCellsStyle({ color: '#CC8844' }, [new wjGrid.CellRange(0, 1, 11, 1), new wjGrid.CellRange(0, 3, 11, 3), new wjGrid.CellRange(0, 5, 11, 5)]); dragDropSheet.applyCellsStyle({ color: '#336699' }, [new wjGrid.CellRange(0, 6, 5, 7)]); dragDropSheet.applyCellsStyle({ backgroundColor: '#996633' }, [new wjGrid.CellRange(6, 6, 11, 7)]); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet Drag and Drop</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="dragDropSheet"></div> </div> </body> </html> .wj-flexsheet { height: 400px; margin: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridSheetModule } from '@grapecity/wijmo.angular2.grid.sheet'; import * as wjcGrid from '@grapecity/wijmo.grid'; import * as wjcSheet from '@grapecity/wijmo.grid.sheet'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { initializeFlexSheet(flex: wjcSheet.FlexSheet) { flex.deferUpdate(() => { let colIdx: number, rowIdx: number; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } flex.applyCellsStyle({ fontWeight: 'bold' }, [new wjcGrid.CellRange(0, 0, 5, 0), new wjcGrid.CellRange(6, 1, 11, 1)]); flex.applyCellsStyle({ textDecoration: 'underline' }, [new wjcGrid.CellRange(0, 2, 5, 2), new wjcGrid.CellRange(6, 3, 11, 3)]); flex.applyCellsStyle({ fontStyle: 'italic' }, [new wjcGrid.CellRange(0, 4, 5, 4), new wjcGrid.CellRange(6, 5, 11, 5)]); flex.applyCellsStyle({ format: 'c2' }, [new wjcGrid.CellRange(0, 0, 5, 7)]); flex.applyCellsStyle({ backgroundColor: '#4488CC' }, [new wjcGrid.CellRange(0, 0, 11, 0), new wjcGrid.CellRange(0, 2, 11, 2), new wjcGrid.CellRange(0, 4, 11, 4)]); flex.applyCellsStyle({ color: '#CC8844' }, [new wjcGrid.CellRange(0, 1, 11, 1), new wjcGrid.CellRange(0, 3, 11, 3), new wjcGrid.CellRange(0, 5, 11, 5)]); flex.applyCellsStyle({ color: '#336699' }, [new wjcGrid.CellRange(0, 6, 5, 7)]); flex.applyCellsStyle({ backgroundColor: '#996633' }, [new wjcGrid.CellRange(6, 6, 11, 7)]); }); } } @NgModule({ imports: [WjGridSheetModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet Drag and Drop</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet #flex (initialized)="initializeFlexSheet(flex)"> <wj-sheet [name]="'unbound'" [rowCount]="12" [columnCount]="8"></wj-sheet> </wj-flex-sheet> </div> .wj-flexsheet { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet :initialized="initializeFlexSheet"> <wj-sheet :name="'unbound'" :rowCount="12" :columnCount="8"></wj-sheet> </wj-flex-sheet> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.core"; import "@grapecity/wijmo.vue2.grid.sheet"; import * as wjcGrid from "@grapecity/wijmo.grid"; let App = Vue.extend({ name: "app", methods: { initializeFlexSheet: function(flex) { flex.deferUpdate(() => { let colIdx, rowIdx; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } flex.applyCellsStyle({ fontWeight: "bold" }, [ new wjcGrid.CellRange(0, 0, 5, 0), new wjcGrid.CellRange(6, 1, 11, 1) ]); flex.applyCellsStyle({ textDecoration: "underline" }, [ new wjcGrid.CellRange(0, 2, 5, 2), new wjcGrid.CellRange(6, 3, 11, 3) ]); flex.applyCellsStyle({ fontStyle: "italic" }, [ new wjcGrid.CellRange(0, 4, 5, 4), new wjcGrid.CellRange(6, 5, 11, 5) ]); flex.applyCellsStyle({ format: "c2" }, [ new wjcGrid.CellRange(0, 0, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#4488CC" }, [ new wjcGrid.CellRange(0, 0, 11, 0), new wjcGrid.CellRange(0, 2, 11, 2), new wjcGrid.CellRange(0, 4, 11, 4) ]); flex.applyCellsStyle({ color: "#CC8844" }, [ new wjcGrid.CellRange(0, 1, 11, 1), new wjcGrid.CellRange(0, 3, 11, 3), new wjcGrid.CellRange(0, 5, 11, 5) ]); flex.applyCellsStyle({ color: "#336699" }, [ new wjcGrid.CellRange(0, 6, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#996633" }, [ new wjcGrid.CellRange(6, 6, 11, 7) ]); }); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/jszip/dist/jszip.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjcGrid from "@grapecity/wijmo.grid"; import * as wjGridSheet from "@grapecity/wijmo.react.grid.sheet"; class App extends React.Component { constructor(props) { super(props); } render() { return (<div className="container-fluid"> <wjGridSheet.FlexSheet initialized={this.initializeFlexSheet.bind(this)}> <wjGridSheet.Sheet name="unbound" rowCount={12} columnCount={8}></wjGridSheet.Sheet> </wjGridSheet.FlexSheet> </div>); } initializeFlexSheet(flex) { flex.deferUpdate(() => { let colIdx, rowIdx; for (colIdx = 0; colIdx < flex.columns.length; colIdx++) { for (rowIdx = 0; rowIdx < flex.rows.length; rowIdx++) { flex.setCellData(rowIdx, colIdx, colIdx + rowIdx); } } flex.applyCellsStyle({ fontWeight: "bold" }, [ new wjcGrid.CellRange(0, 0, 5, 0), new wjcGrid.CellRange(6, 1, 11, 1) ]); flex.applyCellsStyle({ textDecoration: "underline" }, [ new wjcGrid.CellRange(0, 2, 5, 2), new wjcGrid.CellRange(6, 3, 11, 3) ]); flex.applyCellsStyle({ fontStyle: "italic" }, [ new wjcGrid.CellRange(0, 4, 5, 4), new wjcGrid.CellRange(6, 5, 11, 5) ]); flex.applyCellsStyle({ format: "c2" }, [ new wjcGrid.CellRange(0, 0, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#4488CC" }, [ new wjcGrid.CellRange(0, 0, 11, 0), new wjcGrid.CellRange(0, 2, 11, 2), new wjcGrid.CellRange(0, 4, 11, 4) ]); flex.applyCellsStyle({ color: "#CC8844" }, [ new wjcGrid.CellRange(0, 1, 11, 1), new wjcGrid.CellRange(0, 3, 11, 3), new wjcGrid.CellRange(0, 5, 11, 5) ]); flex.applyCellsStyle({ color: "#336699" }, [ new wjcGrid.CellRange(0, 6, 5, 7) ]); flex.applyCellsStyle({ backgroundColor: "#996633" }, [ new wjcGrid.CellRange(6, 6, 11, 7) ]); }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; }