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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);