HTML Elements › Forums › Data Grid › localization

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Anonymous 10 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 29, 2019 at 11:25 am #100468
    Avatar
    Anonymous

    hi,

    can you help me use messages with grid? where can I to find the example?

    Fabio

    October 30, 2019 at 6:07 pm #100481
    Avatar
    Anonymous

    Hello FabioNicc,

    we prepared a localization demo for you. Here is how you can set the messages property:

    grid.messages = {
        'en': {
            'columnMenuItemSortAsc': 'Sort {{mode}}',
            'columnMenuItemSortDesc': 'Sort {{mode}}', //Sort A → Z
            'columnMenuItemRemoveSort': 'Remove Sort',
            'currencySymbol': '£',
        },
        'de': {
            'columnMenuItemSortAsc': 'Sortieren {{mode}}',
            'columnMenuItemSortDesc': 'Sortieren {{mode}}',
            'columnMenuItemRemoveSort': 'Sortierung entfernen',
            'currencySymbol': '€',
        },
    };

    and by switching the “locale” property, you can change the language code:

    grid.locale = 'de';

    or

    grid.locale = 'en';

    We also implemented two format functions. The first one translates the month of the date, and the second one switch the currency symbol according to the selected language.

    Here is the index.htm file for the demo:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid Localization Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />
	<link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <script src="../../../scripts/data.js"></script>
</head>
<body class="viewport">
    <smart-grid id="grid"></smart-grid>

    <div class="options">
        <div class="caption">
            Language:
        </div>
        <div class="option"><br />
            <smart-radio-button class="language" id="en" enable-container-click>English</smart-radio-button><br/>
            <smart-radio-button class="language" id="de" enable-container-click checked>Deutsch</smart-radio-button>
        </div>
    </div>

    <!-- scripts -->
    <script type="module" src="../../../source/modules/smart.grid.js"></script>
    <script type="module" src="../../../source/modules/smart.radiobutton.js"></script>
    <script type="module" src="index.js"></script>
</body>
</html>

    Here is the index.js file:

    function setLocalizationCurrency(grid, currency) {
    return grid.localize('currencySymbol') + currency.toFixed(2);
}

function setLocalizationDate(grid, date) {
    let dateLocale = 'de-DE';
    if (grid.locale === 'en') {
        dateLocale = 'en-GB';
    }

    return date.toLocaleString(dateLocale, { timeZone: 'UTC', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
}

let localizationColumnLabelsDe = [
    {
        label: 'Vorname' //First Name
    },
    {
        label: 'Familienname' //Last Name
    },
    {
        label: 'Datum' //Date
    },
    {
        label: 'Gesamt' //Total
    },
];
let localizationColumnLabelsEn = [
    {
        label: 'First Name'
    },
    {
        label: 'Last Name'
    },
    {
        label: 'Date'
    },
    {
        label: 'Total'
    },
];

let defaultLocalizationColumnLabels = localizationColumnLabelsDe;

window.onload = function () {
    const radioButtons = document.querySelectorAll('smart-radio-button.language');
    const grid = document.getElementById('grid');
    
    grid.locale = 'de'; //Settings default locale
    grid.messages = {
        'en': {
            'columnMenuItemSortAsc': 'Sort {{mode}}',
            'columnMenuItemSortDesc': 'Sort {{mode}}', //Sort A → Z
            'columnMenuItemRemoveSort': 'Remove Sort',
            'currencySymbol': '£',
        },
        'de': {
            'columnMenuItemSortAsc': 'Sortieren {{mode}}',
            'columnMenuItemSortDesc': 'Sortieren {{mode}}', 
            'columnMenuItemRemoveSort': 'Sortierung entfernen',
            'currencySymbol': '€',
        },
    };

    for (let i = 0; i < radioButtons.length; i++) {
        const radioButton = radioButtons[i];

        radioButton.addEventListener('change', function (event) {
            let localizationColumnLabels = defaultLocalizationColumnLabels;

            if (event.detail.value) {
                if (this.id === 'en') {
                    localizationColumnLabels = localizationColumnLabelsEn;
                }

                //Update column labels
                for (let i = 0; i < localizationColumnLabels.length; i++) {
                    grid.columns[i].label = localizationColumnLabels[i].label;
                }
                grid.locale = this.id;
            }
        });
    }
}

Smart('#grid', class {
	get properties() {
        return {
			appearance: {
				alternationCount: 2,
				showRowHeader: true,
				showRowHeaderSelectIcon: true,
				showRowHeaderFocusIcon: true
			},
			paging: {
				enabled: true
			},
			pager: {
				visible: true
			},
			sorting: {
				enabled: true
			},
            editing: {
                enabled: false,
            },
			selection: {
				enabled: true,
				allowCellSelection: true,
				allowRowHeaderSelection: true,
				allowColumnHeaderSelection: true,
				mode: 'extended'
			},
			behavior: { columnResizeMode: 'growAndShrink' },
            dataSource: new Smart.DataAdapter(
                {
                    dataSource: generateData(32),
				dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'date: string',
					'total: number'
				]
			}),
			columns: [
			{ label: defaultLocalizationColumnLabels[0].label, dataField: 'firstName' },
            { label: defaultLocalizationColumnLabels[1].label, dataField: 'lastName' },
            {
                label: defaultLocalizationColumnLabels[2].label, dataField: 'date', formatFunction(settings) {
                    settings.value = new Date(settings.value);
                    settings.value = setLocalizationDate(grid, settings.value);
                }
            },
            {
                label: defaultLocalizationColumnLabels[3].label, dataField: 'total', cellsFormat: 'c2',
                formatFunction(settings) {
                    settings.value = setLocalizationCurrency(grid, settings.value);
                }
            }
			],
		}
	}
});

    Best regards,
    Denis

    Smart HTML Elements Team
    https://www.htmlelements.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.