Localization

The grid offers the ability to set translation of any word.

You can do it by modifying localization input localization: GuidLocalization.

export interface GuiLocalization {

	translation?: GuiTranslation;

	translationResolver?: (key: string, value: string) => string;

}

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:

Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
[New] Items per Page
5
1 - 5 [Better] of 10
import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [paging]="paging"
				  [localization]="localization">
		</gui-grid>
	`
})
export class LocalizationComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];
			
	localization: GuiLocalization = {
	    'translation': {
	        'pagingItemsPerPage': '[New] Items per Page',
	        'pagingOf': '[Better] of',
	        'pagingPrevPage': '[Awesome] Prev page',
	        'pagingNextPage': '[Great] Next page'
	    }
	};
	
	
}
[
    {
        "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.

Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Items per page:[Changed]
5
1 - 5 of[Changed] 10
import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [paging]="paging"
				  [localization]="localization">
		</gui-grid>
	`
})
export class LocalizationResolverComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];
			
	localization: GuiLocalization = {
		translationResolver: (key: string, value: string) => {
			return value + '[Changed]';
		}
	};
}
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Localization - Inputs

export interface GuiLocalization {

	translation?: GuiTranslation;

	translationResolver?: (key: string, value: string) => string;

}
InputTypeDefaultDescription
translationGuiTranslationGuiDefaultTranslation 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.