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",
    "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
5
10
20
1 - 5 [Better] of 10
@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [paging]="paging"
				  [localization]="localization">
		</gui-grid>
	`
})
export class LocalizationComponent {

	users = users;

	columns = [{
        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
5
10
20
1 - 5 of[Changed] 10
@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [paging]="paging"
				  [localization]="localization">
		</gui-grid>
	`
})
export class LocalizationResolverComponent {

	users = users;

	columns = [{
        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.