Drop Target Control

The column's allowDragging property provides control over the drag source (which columns may be dragged into new positions). You can get control over the drop target (the column's new position) by handling the draggingColumnOver event and setting the event's cancel parameter to true if the current source/target combination is invalid.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // create the grid var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data, // // prevent 'country' column from being dragged to index 0 draggingColumn: function (s, e) { theColumn = s.columns[e.col].binding; }, draggingColumnOver: function (s, e) { if (theColumn == 'country') { if (e.col == 0 || e.col == s.columns.length - 1) { e.cancel = true; } } } }); var theColumn = null; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Reordering Events</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"> <p> For example, the grid below does not allow dragging the 'country' column to the last or first positions:</p> <div id="theGrid"></div> </div> </body> </html> .wj-flexgrid { height: 250px; margin: 10px 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 * as wjcGrid from '@grapecity/wijmo.grid'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; private _theColumn: string; constructor() { this.data = this._getData(); } flexInitialized(flexgrid: wjcGrid.FlexGrid) { // prevent 'country' column from being dragged to index 0 flexgrid.draggingColumn.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellRangeEventArgs) => { this._theColumn = s.columns[e.col].binding; }); flexgrid.draggingColumnOver.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellRangeEventArgs) => { if (this._theColumn == 'country') { if (e.col == 0 || e.col == s.columns.length - 1) { e.cancel = true; } } }); } private _getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } // @NgModule({ imports: [WjGridModule, 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 FlexGrid Reordering Events</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"> <p> For example, the grid below does not allow dragging the 'country' column to the last or first positions:</p> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data" (initialized)="flexInitialized(flex)"> </wj-flex-grid> </div> .wj-flexgrid { height: 250px; margin: 10px 0; } <template> <div class="container-fluid"> <p> For example, the grid below does not allow dragging the 'country' column to the last or first positions: </p> <!-- the grid --> <wj-flex-grid :itemsSource="data" :initialized="flexInitialized"></wj-flex-grid> </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'; import { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData(), _theColumn: '' }; }, methods: { flexInitialized: function(flexgrid) { // prevent 'country' column from being dragged to index 0 flexgrid.draggingColumn.addHandler((s, e) => { this._theColumn = s.columns[e.col].binding; }); flexgrid.draggingColumnOver.addHandler((s, e) => { if (this._theColumn == "country") { if (e.col == 0 || e.col == s.columns.length - 1) { e.cancel = true; } } }); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } </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> export function getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <p> For example, the grid below does not allow dragging the 'country' column to the last or first positions: </p> <wjGrid.FlexGrid initialized={this.flexInitialized.bind(this)} itemsSource={this.state.data}> </wjGrid.FlexGrid> </div>; } flexInitialized(flexgrid) { // prevent 'country' column from being dragged to index 0 flexgrid.draggingColumn.addHandler((s, e) => { this._theColumn = s.columns[e.col].binding; }); flexgrid.draggingColumnOver.addHandler((s, e) => { if (this._theColumn == "country") { if (e.col == 0 || e.col == s.columns.length - 1) { e.cancel = true; } } }); } } 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>GrapeCity Wijmo FlexGrid Reordering Events</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> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } export function getData() { // generate some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }