The grid offers the ability to set translation of any word.
You can do it by modifying localization property.
Below you can see an example of full translation for english language:
{
"sourceEmpty": "There are no items to show.",
"pagingItemsPerPage": "Items per page:",
"pagingOf": "of",
"pagingNextPage": "Next",
"pagingPrevPage": "Prev",
"pagingNoItems": "There is no items.",
"infoPanelShowing": "Showing",
"infoPanelItems": "items",
"infoPanelOutOf": "out of",
"infoPanelThemeMangerTooltipText": "Theme manager",
"infoPanelColumnManagerTooltipText": "Column manager",
"infoPanelInfoTooltipText": "info",
"themeManagerModalTitle": "Theme manager",
"themeManagerModalTheme": "Theme:",
"themeManagerModalRowColoring": "Row coloring:",
"themeManagerModalVerticalGrid": "Vertical grid",
"themeManagerModalHorizontalGrid": "HorizontalGrid",
"columnManagerModalTitle": "Manage columns",
"headerMenuMainTab": "Menu",
"headerMenuMainTabColumnSort": "Column sort",
"headerMenuMainTabHideColumn": "Hide column",
"headerMenuMainTabHighlightColumn": "Highlight",
"headerMenuMainTabMoveLeft": "Move left",
"headerMenuMainTabMoveRight": "Move right",
"headerMenuMainTabColumnSortAscending": "Ascending",
"headerMenuMainTabColumnSortDescending": "Descending",
"headerMenuMainTabColumnSortNone": "None",
"headerMenuFilterTab": "Filter",
"headerMenuColumnsTab": "Columns",
"summariesCount": "Count",
"summariesDist": "Dist",
"summariesSum": "Sum",
"summariesAvg": "Avg",
"summariesMin": "Min",
"summariesMax": "Max",
"summariesMed": "Med",
"summariesTruthy": "Truthy",
"summariesFalsy": "Falsy",
"summariesDistinctValuesTooltip": "Distinct values",
"summariesAverageTooltip": "Average",
"summariesMinTooltip": "Min",
"summariesMaxTooltip": "Max",
"summariesMedTooltip": "Median",
"summariesCountTooltip": "Number of items in the grid"
}
When you want to change some of the translations, you can easily do it by modifying the localization.translation property. Similarly to the example below:
$('#jquery-localization-grid').guiGrid({
localization: {
'translation': {
'pagingItemsPerPage': '[New] Items per Page',
'pagingOf': '[Better] of',
'pagingPrevPage': '[Awesome] Prev page',
'pagingNextPage': '[Great] Next page'
}
},
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});
<div id="jquery-localization-grid"></div>
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
Sometimes there is the need of running a code when a translation is being looked up. TranslationResolver
does exactly that. When the localization mechanism searches for a specific translation, the function from declared as a translation resolver is being invoked.
$('#jquery-localization-resolver-grid').guiGrid({
localization = {
translationResolver: (key: string, value: string) => {
return value + '[Changed]';
}
}
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});
<div id="jquery-localization-resolver-grid"></div>
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
Localization - options
Options | Type | Default | Description |
---|---|---|---|
translation | Object | default language | Object contains all translations. |
translationResolver | (key: string, value: string) => string | (key, value) => value | Function which is being invoked every time a translation is looked up. |