Pluralization

In some cases you may want to display custom messages that depend on item counts. This is especially important in certain cultures such as Polish. The format method supports that by accepting format strings that contain pluralization rules encoded as JSON objects. For example, choose the number of items and see the formatted output below:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // build format string with pluralization let fmtPluralStr = JSON.stringify({ count: 'count', when: { 0: 'No items selected.', 1: 'A single item is selected.', 2: 'A pair is selected.', 3: 'A trio is selected.', 4: 'A quartet is selected.', 'other': '{count:n0} items are selected.' } }); // // let the user choose the number of items let theInputNumber = new input.InputNumber('#theInputNumber', { valueChanged: (sender) => { document.querySelector('#msg').textContent = wijmo.format(fmtPluralStr, { count: sender.value }); }, step: 1, value: 1 }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Pluralization</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="theInputNumber"></div> <p id="msg"></p> </div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _fmtPluralStr = JSON.stringify({ count: 'count', when: { 0: 'No items selected.', 1: 'A single item is selected.', 2: 'A pair is selected.', 3: 'A trio is selected.', 4: 'A quartet is selected.', 'other': '{count:n0} items are selected.' } }); // format(value: string) { return wijmo.format(this._fmtPluralStr, { count: value }); } } // @NgModule({ imports: [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 Globalization/Pluralization</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-input-number #theInputNumber [step]="1" [value]="1"> </wj-input-number> <p> {{ format(theInputNumber.value) }} </p> </div> <template> <div class="container-fluid"> <wj-input-number :step="1" :value="1" :value-changed="valueChanged"></wj-input-number> <p>{{ formatValue }}</p> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.input"; import * as wjCore from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", data: function() { return { data: JSON.stringify({ count: "count", when: { 0: "No items selected.", 1: "A single item is selected.", 2: "A pair is selected.", 3: "A trio is selected.", 4: "A quartet is selected.", other: "{count:n0} items are selected." } }), value:0 }; }, methods: { valueChanged: function(e) { this.value = e.value; } }, computed: { formatValue: function() { return wijmo.format(this.data, { count: this.value }); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Pluralization</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 * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjInput from '@grapecity/wijmo.react.input'; import * as wijmo from "@grapecity/wijmo"; class App extends React.Component { constructor(props) { super(props); this.valueChanged = (e) => { this.setState({ value: e.value }); }; this.formatValue = () => { return wijmo.format(this.state.data, { count: this.state.value }); }; this.state = { data: JSON.stringify({ count: "count", when: { 0: "No items selected.", 1: "A single item is selected.", 2: "A pair is selected.", 3: "A trio is selected.", 4: "A quartet is selected.", other: "{count:n0} items are selected." } }), value: 1 }; } render() { return <div className="container-fluid"> <wjInput.InputNumber step={1} value={this.state.value} valueChanged={this.valueChanged}></wjInput.InputNumber> <p>{this.formatValue()}</p> </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>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'); </script> </head> <body> <div id="app"></div> </body> </html>