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:

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'
	    }
	};
	
	
}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

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]';
		}
	};
}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

export interface GuiLocalization {

	translation?: GuiTranslation;

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

}