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",
    "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
    }, ...
]

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.

$('#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
    }, ...
]