There are two ways to change localization resources in DataViews: using the built-in resources or custom default text:
Import built-in resource file: you can import the built-in resource file in the Html head.
The English, Chinese, and Japanese resources are built into DataViews.
In this demo, the different built-in scripts are imported dynamically to show this feature
Custom via options: if you want to change default text, you can set your own display text by setting options.localeResource
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.
<!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" />
<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:
'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ',
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">
<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 */
