Delete Rows with Ctrl+Delete

Use Fn+Delete on Mac keyboards. You can handle keyboard events in the FlexGrid by adding HTML event listeners to the grid's hostElement. For example, the grid below listens to the 'keydown' event. If you press Ctrl+Delete, it shows a prompt and deletes the current row.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the grid var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: getData(), allowAddNew: true }); // // use ctrl+Delete to delete the current row var theDialog = new wjInput.Popup('#theDialog'); theGrid.hostElement.addEventListener('keydown', function (e) { var view = theGrid.collectionView; // // looking for ctrl+Delete if (e.ctrlKey && e.keyCode == wjCore.Key.Delete && view.currentItem) { // // prevent the grid from getting the key e.preventDefault(); // // confirm row deletion theDialog.show(true, function (sender) { // // delete the row if (sender.dialogResult == 'wj-hide-ok') { view.remove(view.currentItem); } // // return focus to the grid theGrid.focus(); }); } }, true); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Keyboard 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> Press Ctrl+Delete to remove the current row:</p> <div id="theGrid"></div> <div id="theDialog" style="display:none"> <div class="wj-dialog-header"> Deleting Row </div> <div class="wj-dialog-body" tabindex="-1"> Do you really want to delete this row? </div> <div class="wj-dialog-footer"> <button class="btn btn-primary wj-hide-ok">Yes</button> <button class="btn btn-default wj-hide">No</button> </div> </div> </div> </body> </html> // grab the event before the grid // // generate some random data export function getData() { var countries = 'US,Canada,Mexico,Germany,UK,France,Italy,Greece,Holland,Japan,Korea,China'.split(','), data = []; for (var i = 0; i < 1000; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 3 == 0 }); } return data; } .wj-flexgrid { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; import * as wjcInput from '@grapecity/wijmo.input'; @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(); } @ViewChild('popup') popup: wjcInput.Popup; initializeGrid(flex: wjcGrid.FlexGrid) { flex.hostElement.addEventListener('keydown', (e: KeyboardEvent) => { let view = <wjcCore.CollectionView>flex.collectionView; // looking for ctrl+Delete if (e.ctrlKey && e.keyCode == wjcCore.Key.Delete && view.currentItem) { // prevent the grid from getting the key e.preventDefault(); // confirm row deletion this.popup.show(true, (sender: wjcInput.Popup) => { // delete the row if (sender.dialogResult == 'wj-hide-ok') { view.remove(view.currentItem); } // return focus to the grid flex.focus(); }); } }, true); } private _getData() { // create some random data let countries = 'US,Canada,Mexico,Germany,UK,France,Italy,Greece,Holland,Japan,Korea,China'.split(','), data = []; for (let i = 0; i < 1000; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 3 == 0 }); } return data; } } @NgModule({ imports: [WjGridModule, WjInputModule, 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 Keyboard 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"> <!-- the grid --> <wj-flex-grid #flex [allowAddNew]="true" [(itemsSource)]="data" (initialized)="initializeGrid(flex)"> </wj-flex-grid> <wj-popup #popup class="modal-content"> <div class="modal-header"> Deleting Row </div> <div class="modal-body" tabindex="-1"> Do you really want to delete this row? </div> <div class="modal-footer"> <button class="btn btn-primary wj-hide-ok">Yes</button> <button class="btn btn-default wj-hide">No</button> </div> </wj-popup> </div> .wj-flexgrid { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :allowAddNew="true" :itemsSource="data" :initialized="initializeGrid"></wj-flex-grid> <wj-popup class="modal-content" :initialized="initPopup"> <div class="modal-header">Deleting Row</div> <div class="modal-body" tabindex="-1">Do you really want to delete this row?</div> <div class="modal-footer"> <button class="btn btn-primary wj-hide-ok">Yes</button> <button class="btn btn-default wj-hide">No</button> </div> </wj-popup> </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 "@grapecity/wijmo.vue2.input"; import { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData(), popup: null }; }, methods: { initPopup: function(popup) { this.popup = popup; }, initializeGrid: function(flex) { flex.hostElement.addEventListener( "keydown", e => { let view = flex.collectionView; // looking for ctrl+Delete if ( e.ctrlKey && e.keyCode == wijmo.Key.Delete && view.currentItem ) { // prevent the grid from getting the key e.preventDefault(); // confirm row deletion this.popup.show(true, sender => { // delete the row if (sender.dialogResult == "wj-hide-ok") { view.remove(view.currentItem); } // return focus to the grid flex.focus(); }); } }, true ); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } </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() { // create some random data let countries = 'US,Canada,Mexico,Germany,UK,France,Italy,Greece,Holland,Japan,Korea,China'.split(','), data = []; for (let i = 0; i < 1000; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 3 == 0 }); } 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 * as wjcCore from '@grapecity/wijmo'; import * as wjInput from "@grapecity/wijmo.react.input"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid allowAddNew={true} initialized={this.initializeGrid.bind(this)} itemsSource={this.state.data}> </wjGrid.FlexGrid> <wjInput.Popup className="modal-content" initialized={this.initPopup.bind(this)}> <div className="modal-header">Deleting Row</div> <div className="modal-body">Do you really want to delete this row?</div> <div className="modal-footer"> <button className="btn btn-primary wj-hide-ok">Yes</button> <button className="btn btn-default wj-hide">No</button> </div> </wjInput.Popup> </div>; } initializeGrid(flex) { flex.hostElement.addEventListener("keydown", e => { let view = flex.collectionView; // looking for ctrl+Delete if (e.ctrlKey && e.keyCode == wjcCore.Key.Delete && view.currentItem) { // prevent the grid from getting the key e.preventDefault(); // confirm row deletion this.popup.show(true, sender => { // delete the row if (sender.dialogResult == "wj-hide-ok") { view.remove(view.currentItem); } // return focus to the grid flex.focus(); }); } }, true); } initPopup(popup) { this.popup = popup; } } 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 Keyboard 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 { height: 300px; margin: 10px 0; } body { margin-bottom: 24pt; } export function getData() { // create some random data let countries = 'US,Canada,Mexico,Germany,UK,France,Italy,Greece,Holland,Japan,Korea,China'.split(','), data = []; for (let i = 0; i < 1000; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, active: i % 3 == 0 }); } return data; }