Reordering

By default, users may reorder columns by dragging their headers into new positions. You may prevent users from reordering columns by setting the grid's allowDragging property to 'None'. You may also prevent dragging specific columns by setting the columns allowDragging property to false. For example, the grid below allows reordering all columns except 'ID.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid } 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 }); } // default behavior: allow column reordering var theGrid = new FlexGrid('#theGrid', { itemsSource: data }); // prevent reordering the first column theGrid.getColumn('id').allowDragging = false; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Reordering Columns</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="theGrid"></div> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column reordering. Unfortunately, most mobile devices do not support this API. If you want to support column reordering on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> </body> </html> .wj-flexgrid { height: 150px; 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 { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // DataSvc will be passed by derived classes constructor() { this.data = this._getData(); } 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 Columns</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"> <wj-flex-grid #flex [(itemsSource)]="data"> <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [allowDragging]="false"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Downloads'" [binding]="'downloads'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column reordering. Unfortunately, most mobile devices do not support this API. If you want to support column reordering on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> .wj-flexgrid { height: 150px; margin:10px 0; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data"> <wj-flex-grid-column header="ID" binding="id" :allowDragging=false></wj-flex-grid-column> <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column> <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column> <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column> <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column> </wj-flex-grid> <div class="panel panel-warning"> <div class="panel-heading"> Wijmo uses the HTML5 drag/drop API for column reordering. Unfortunately, most mobile devices do not support this API. If you want to support column reordering on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wjcGrid from "@grapecity/wijmo.grid"; new Vue({ el: "#app", data: function() { return { data : this._getData() }; }, methods:{ _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; } } }); </script> <style> .wj-flexgrid { height: 150px; margin:10px 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/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 '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'; class App extends React.Component { constructor(props) { super(props); this.state = { data: this.getData() }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjGrid.FlexGridColumn header="ID" binding="id" allowDragging={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Country" binding="country"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Downloads" binding="downloads"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn header="Expenses" binding="expenses"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> <div className="panel panel-warning"> <div className="panel-heading"> Wijmo uses the HTML5 drag/drop API for column reordering. Unfortunately, most mobile devices do not support this API. If you want to support column reordering on mobile devices, we suggest you use the <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank"> DragDropTouch polyfill </a>. </div> </div> </div>; } 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; } } 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 Columns</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 { height: 150px; margin:10px 0; }