IME (Input Method Editor)

IME is an abbreviation of Input Method Editor. IME allows any data, such as keyboard strokes or mouse movements, to be received as input. In this way users can enter characters and symbols not found on their input devices. IME is obligatory for languages such as Japanese, Chinese, Korean, and Taiwanese. The FlexGrid supports IME through its imeEnabled property. For example, the grid below has imeEnabled set to true. If you set the keyboard language to Japanese or Chinese and enable IME, the grid will honor that setting and will allow you to edit cells using the selected IME mode by typing directly into the cells:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the grid and enable IME var theGrid = new wjGrid.FlexGrid('#theGrid', { imeEnabled: true, autoGenerateColumns: false, columns: [ { binding: 'id', header: '#', isReadOnly: true, width: 50 }, { binding: 'en', header: 'English' }, { binding: 'ja', header: 'Japanese' }, { binding: 'pop', header: 'Pop (tho)', format: 'n0,' } ], itemsSource: getData(), }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid IME</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> </body> </html> // data with some Japanese names in it export function getData() { return [ { id: 1, en: "Tokyo", ja: "東京特別区部", pop: 8637098 }, { id: 2, en: "Yokohama", ja: "横浜市", pop: 3697894 }, { id: 3, en: "Osaka", ja: "大阪市", pop: 2668586 }, { id: 4, en: "Nagoya", ja: "名古屋市", pop: 2283289 }, { id: 5, en: "Sapporo", ja: "札幌市", pop: 1918096 }, { id: 6, en: "Kobe", ja: "神戸市", pop: 1530847 }, { id: 7, en: "Kyoto", ja: "京都市", pop: 1474570 }, { id: 8, en: "Fukuoka", ja: "福岡市", pop: 1430371 }, { id: 9, en: "Kawasaki", ja: "川崎市", pop: 1373630 }, { id: 10, en: "Saitama", ja: "さいたま市", pop: 1192418 }, { id: 11, en: "Hiroshima", ja: "広島市", pop: 1163806 }, { id: 12, en: "Sendai", ja: "仙台市", pop: 1029552 }, { id: 13, en: "Kitakyūshū", ja: "北九州市", pop: 986998 }, { id: 14, en: "Chiba", ja: "千葉市", pop: 938695 }, { id: 15, en: "Setagaya", ja: "世田谷区", pop: 855416 }, { id: 16, en: "Sakai", ja: "堺市", pop: 835333 }, { id: 17, en: "Niigata", ja: "新潟市", pop: 813053 }, { id: 18, en: "Hamamatsu", ja: "浜松市", pop: 811431 }, { id: 19, en: "Shizuoka", ja: "静岡市", pop: 710944 }, { id: 20, en: "Sagamihara", ja: "相模原市", pop: 706342 } ]; } .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 48px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, Inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { DataService } from './app.data'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // DataSvc will be passed by derived classes constructor(@Inject(DataService) dataSvc: DataService) { this.data = dataSvc.getData(); } } @NgModule({ imports: [WjGridModule, FormsModule, BrowserModule], providers: [DataService], 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 IME</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 [imeEnabled]="true" [(itemsSource)]="data"> <wj-flex-grid-column [binding]="'id'" [header]="'#'" [width]="50" [isReadOnly]="true"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'en'" [header]="'English'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'ja'" [header]="'Japanese'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'pop'" [header]="'Pop (tho)'" [format]="'n0'"></wj-flex-grid-column> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; @Injectable() export class DataService { getData(): any[] { return [ { id: 1, en: "Tokyo", ja: "東京特別区部", pop: 8637098 }, { id: 2, en: "Yokohama", ja: "横浜市", pop: 3697894 }, { id: 3, en: "Osaka", ja: "大阪市", pop: 2668586 }, { id: 4, en: "Nagoya", ja: "名古屋市", pop: 2283289 }, { id: 5, en: "Sapporo", ja: "札幌市", pop: 1918096 }, { id: 6, en: "Kobe", ja: "神戸市", pop: 1530847 }, { id: 7, en: "Kyoto", ja: "京都市", pop: 1474570 }, { id: 8, en: "Fukuoka", ja: "福岡市", pop: 1430371 }, { id: 9, en: "Kawasaki", ja: "川崎市", pop: 1373630 }, { id: 10, en: "Saitama", ja: "さいたま市", pop: 1192418 }, { id: 11, en: "Hiroshima", ja: "広島市", pop: 1163806 }, { id: 12, en: "Sendai", ja: "仙台市", pop: 1029552 }, { id: 13, en: "Kitakyūshū", ja: "北九州市", pop: 986998 }, { id: 14, en: "Chiba", ja: "千葉市", pop: 938695 }, { id: 15, en: "Setagaya", ja: "世田谷区", pop: 855416 }, { id: 16, en: "Sakai", ja: "堺市", pop: 835333 }, { id: 17, en: "Niigata", ja: "新潟市", pop: 813053 }, { id: 18, en: "Hamamatsu", ja: "浜松市", pop: 811431 }, { id: 19, en: "Shizuoka", ja: "静岡市", pop: 710944 }, { id: 20, en: "Sagamihara", ja: "相模原市", pop: 706342 } ]; } } .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 48px; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :imeEnabled=true :itemsSource="data"> <wj-flex-grid-column binding="id" header="#" :width="50" :isReadOnly=true></wj-flex-grid-column> <wj-flex-grid-column binding="en" header="English"></wj-flex-grid-column> <wj-flex-grid-column binding="ja" header="Japanese"></wj-flex-grid-column> <wj-flex-grid-column binding="pop" header="Pop (tho)" format="n0"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import { getData } from "./data.js" new Vue({ el: "#app", data: { data: getData() } }); </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 48px; } </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> export function getData() { return [ { id: 1, en: "Tokyo", ja: "東京特別区部", pop: 8637098 }, { id: 2, en: "Yokohama", ja: "横浜市", pop: 3697894 }, { id: 3, en: "Osaka", ja: "大阪市", pop: 2668586 }, { id: 4, en: "Nagoya", ja: "名古屋市", pop: 2283289 }, { id: 5, en: "Sapporo", ja: "札幌市", pop: 1918096 }, { id: 6, en: "Kobe", ja: "神戸市", pop: 1530847 }, { id: 7, en: "Kyoto", ja: "京都市", pop: 1474570 }, { id: 8, en: "Fukuoka", ja: "福岡市", pop: 1430371 }, { id: 9, en: "Kawasaki", ja: "川崎市", pop: 1373630 }, { id: 10, en: "Saitama", ja: "さいたま市", pop: 1192418 }, { id: 11, en: "Hiroshima", ja: "広島市", pop: 1163806 }, { id: 12, en: "Sendai", ja: "仙台市", pop: 1029552 }, { id: 13, en: "Kitakyūshū", ja: "北九州市", pop: 986998 }, { id: 14, en: "Chiba", ja: "千葉市", pop: 938695 }, { id: 15, en: "Setagaya", ja: "世田谷区", pop: 855416 }, { id: 16, en: "Sakai", ja: "堺市", pop: 835333 }, { id: 17, en: "Niigata", ja: "新潟市", pop: 813053 }, { id: 18, en: "Hamamatsu", ja: "浜松市", pop: 811431 }, { id: 19, en: "Shizuoka", ja: "静岡市", pop: 710944 }, { id: 20, en: "Sagamihara", ja: "相模原市", pop: 706342 } ]; } 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"> <wjGrid.FlexGrid imeEnabled={true} itemsSource={this.state.data}> <wjGrid.FlexGridColumn binding="id" header="#" width={50} isReadOnly={true}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="en" header="English" isRequired={true}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="ja" header="Japanese"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="pop" header="Pop (tho)" format="n0"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } } 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 IME</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: 48px; } export function getData() { return [ { id: 1, en: "Tokyo", ja: "東京特別区部", pop: 8637098 }, { id: 2, en: "Yokohama", ja: "横浜市", pop: 3697894 }, { id: 3, en: "Osaka", ja: "大阪市", pop: 2668586 }, { id: 4, en: "Nagoya", ja: "名古屋市", pop: 2283289 }, { id: 5, en: "Sapporo", ja: "札幌市", pop: 1918096 }, { id: 6, en: "Kobe", ja: "神戸市", pop: 1530847 }, { id: 7, en: "Kyoto", ja: "京都市", pop: 1474570 }, { id: 8, en: "Fukuoka", ja: "福岡市", pop: 1430371 }, { id: 9, en: "Kawasaki", ja: "川崎市", pop: 1373630 }, { id: 10, en: "Saitama", ja: "さいたま市", pop: 1192418 }, { id: 11, en: "Hiroshima", ja: "広島市", pop: 1163806 }, { id: 12, en: "Sendai", ja: "仙台市", pop: 1029552 }, { id: 13, en: "Kitakyūshū", ja: "北九州市", pop: 986998 }, { id: 14, en: "Chiba", ja: "千葉市", pop: 938695 }, { id: 15, en: "Setagaya", ja: "世田谷区", pop: 855416 }, { id: 16, en: "Sakai", ja: "堺市", pop: 835333 }, { id: 17, en: "Niigata", ja: "新潟市", pop: 813053 }, { id: 18, en: "Hamamatsu", ja: "浜松市", pop: 811431 }, { id: 19, en: "Shizuoka", ja: "静岡市", pop: 710944 }, { id: 20, en: "Sagamihara", ja: "相模原市", pop: 706342 } ]; }