Localization

There are two ways to change localization resources in DataViews, using the built-in resources or custom default text

<p>There are two ways to change localization resources in DataViews, using the built-in resources or custom default text:</p> <ul> <li><strong>Import built-in resource file:</strong> you can import the built-in resource file in the Html head. The English, Chinese, and Japanese resources are built in DataViews. In this demo, the different built-in scripts are imported dynamically to show this feature</li> <li><strong>Custom via options:</strong> if you want to change default text, you can set your own display text by setting options.localeResource</li> </ul> <p>In this example, you can change the language of the View via the drop-down menu at the top. This will reinitialize the View with the specified language.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Basics/Localization/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="localization" /> <meta name="description" content="There are two ways to change localization resources in DataViews, using the built-in resources or custom default text" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Localization | Features | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div class="main-container"> <div class="sample-options"> <label>Language:</label> <select id="grid-locale-mode"> <option value="en">en</option> <option value="ja">ja</option> <option value="zh">zh</option> <option value="ko">ko</option> </select> </div> <div id="grid" class="grid"></div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols = [ { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: '*', }, { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: '*', }, { id: 'score', caption: 'Score', dataField: 'score', width: '*', dataType: 'number', }, { id: 'position', caption: 'Position', dataField: 'position', width: '*', }, ]; var getScript = function getScript(lang, onload) { var js = process.env.NODE_ENV === 'production' ? '.min.js' : '.js'; var src = ''.concat(process.env.SITE_ROOT, '/static/dataviews/locale/gc.dataviews.locale.').concat(lang).concat(js); var script = document.querySelector('script[src*="/locale/gc.dataviews."]'); if (script) { script.parentNode.removeChild(script); } script = document.createElement('script'); script.async = 'async'; script.src = src; if (onload) { script.onload = onload; } document.getElementsByTagName('head')[0].appendChild(script); }; var dataView; var sourceData = data; initGrid(data); $('#grid-locale-mode').change(function () { var value = $('#grid-locale-mode').val(); getScript(value, function () { initGrid(sourceData); }); }); function initGrid(data) { if (dataView) { dataView.destroy(); } var layout = new GC.DataViews.GridLayout({ rowHeight: 40, colMinWidth: 100, allowEditing: true, showToolPanel: true, allowGrouping: true, editMode: 'popup', }); dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); document.getElementById('grid').focus(); }
// resumes var data = [{ firstName: 'Alexa', lastName: 'Wilder', registeredDate: 'Oct 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. He can solve problems in a short time.' }, { firstName: 'Victor', lastName: 'Wooten', registeredDate: 'May 14, 2018', score: 70, position: 'Web Developer', advantage: 'Positive and optimistic, always first to work on latest technology in company.' }, { firstName: 'Darrin', lastName: 'Sweeney', registeredDate: 'June 14, 2018', score: 60, position: '.NET Developer', advantage: 'Loves games day, family day, and outings.' }, { firstName: 'Jen', lastName: 'Coulter', registeredDate: 'April 14, 2018', score: '95', position: 'Admin Assistant', advantage: 'Very good communication skills.' }, { firstName: 'Ifeoma', lastName: 'Mays', registeredDate: 'April 14,2018', score: 85, position: 'Sales Manager', advantage: 'Manages his team well. They are always ready to resolve conflict.' }, { firstName: 'Akeem', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 80, position: 'Sales Manager', advantage: 'Has experience in managing teams over 20 employees.' }, { firstName: 'Buffy', lastName: 'Weber', registeredDate: 'April 25, 2018', score: 80, position: 'Sales', advantage: 'Is eager to communicate with others.' }, { firstName: 'Akeem', lastName: 'Abdul', registeredDate: 'April 14, 2018', score: 80, position: 'Web Developer', advantage: 'Positive and optimistic, always first to work on latest technology in company.' }, { firstName: 'Buffy', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. He can solve problems quickly.' }, { firstName: 'Guy', lastName: 'Wooten', registeredDate: 'July 14, 2018', score: 90, position: 'Web Developer', advantage: 'A lot of experience on latest technology.' }, { firstName: 'Gina', lastName: 'Wilder', registeredDate: 'Oct 14, 2018', score: 70, position: 'Web Developer', advantage: 'Very smart. She can solve problems quickly.' }, { firstName: 'Guy', lastName: 'Wooten', registeredDate: 'May 14, 2018', score: 90, position: 'Sales', advantage: 'Is eager to communicate with others Would be good at networking.' }, { firstName: 'Daryl', lastName: 'Sweeney', registeredDate: 'June 14, 2018', score: 90, position: 'Sales', advantage: 'Love games day, family day, and outings.' }, { firstName: 'Sally', lastName: 'Weber', registeredDate: 'April 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. She can solve problems quickly.' }, { firstName: 'Euna Lee', lastName: 'Mays', registeredDate: 'April 14,2018', score: 90, position: 'Admin Assistant', advantage: 'HR department is good. They always ready to resolve confusions if any.' }, { firstName: 'Akeem', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 60, position: 'Admin Assistant', advantage: 'Manages his team well. They are always ready to resolve conflict.' }, { firstName: 'Buffy', lastName: 'Weber', registeredDate: 'April 25, 2018', score: 65, position: 'Admin Assistant', advantage: 'Manages her team well. They are always ready to resolve conflict.' }, { firstName: 'Aaron', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 60, position: '.NET Developer', advantage: 'Very smart. He can solve problems quickly.' }, { firstName: 'Buffy', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 70, position: '.NET Developer', advantage: 'A lot of exposure on latest technology.' }, { firstName: 'Guy', lastName: 'Junker', registeredDate: 'July 14, 2018', score: 80, position: '.NET Developer', advantage: 'A lot of exposure on latest technology.' }];
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; overflow: hidden; padding: 10px; flex-grow: 0; flex-shrink: 0; } .sample-options label { margin-right: 5px; } .grid { height: 100%; width: 100%; flex-grow: 1; flex-shrink: 1; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0Jhc2ljcy9Mb2NhbGl6YXRpb24vcHVyZWpzL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvQmFzaWNzL0xvY2FsaXphdGlvbi9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjtBRENFO0VBQ0UsaUJBQUE7QUNDSjs7QURHQTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNBRiIsImZpbGUiOiJGZWF0dXJlcy9CYXNpY3MvTG9jYWxpemF0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcblxuICBsYWJlbCB7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gIH1cbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbn1cbi5zYW1wbGUtb3B0aW9ucyBsYWJlbCB7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59Il19 */