Localization

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",
    "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:

Localization example
localization-grid.js
localization.html
users.js
$('#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>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Translation resolver

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.

Localization example
localization-grid.js
localization.html
users.js
$('#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>
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Localization - options

OptionsTypeDefaultDescription
translationObjectdefault 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.

Related articles:









We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.