|
| 1 | +import { Component, OnInit, Injectable } from '@angular/core'; |
| 2 | +import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid'; |
| 3 | +import { TranslateService } from '@ngx-translate/core'; |
| 4 | + |
| 5 | +@Component({ |
| 6 | + templateUrl: './grid-localization.component.html' |
| 7 | +}) |
| 8 | +@Injectable() |
| 9 | +export class GridLocalizationComponent implements OnInit { |
| 10 | + title = 'Example 12: Localization (i18n)'; |
| 11 | + subTitle = `Support multiple locales with the i18next plugin, following these steps |
| 12 | + <ol class="small"> |
| 13 | + <li>You first need to "enableTranslate" in the Grid Options</li> |
| 14 | + <li>In the Column Definitions, you have following options</li> |
| 15 | + <ul> |
| 16 | + <li>To translate a header title, use "headerKey" with a translate key (headerKey: 'TITLE')</li> |
| 17 | + <li>For the cell values, you need to use a Formatter, there's 2 ways of doing it</li> |
| 18 | + <ul> |
| 19 | + <li>formatter: myCustomTranslateFormatter <b><= "Title" column uses it</b></li> |
| 20 | + <li>formatter: Formatters.translate, params: { i18n: this.translateService } <b><= "Completed" column uses it</b></li> |
| 21 | + </ul> |
| 22 | + </ul> |
| 23 | + <li>For date localization, you need to create your own custom formatter. </li> |
| 24 | + <ul> |
| 25 | + <li>You can easily implement logic to switch between Formatters "dateIso" or "dateUs", depending on current locale.</li> |
| 26 | + </ul> |
| 27 | + </ol> |
| 28 | + `; |
| 29 | + |
| 30 | + columnDefinitions: Column[]; |
| 31 | + gridOptions: GridOption; |
| 32 | + dataset: any[]; |
| 33 | + selectedLanguage: string; |
| 34 | + |
| 35 | + constructor(private gridExtraService: GridExtraService, private translate: TranslateService) { |
| 36 | + this.selectedLanguage = this.translate.getDefaultLang(); |
| 37 | + } |
| 38 | + |
| 39 | + ngOnInit(): void { |
| 40 | + this.columnDefinitions = [ |
| 41 | + { id: 'title', name: 'Title', field: 'title', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100 }, |
| 42 | + { id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true, minWidth: 100 }, |
| 43 | + { id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, minWidth: 100 }, |
| 44 | + { id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, minWidth: 100 }, |
| 45 | + { id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, params: { i18n: this.translate }, sortable: true, minWidth: 100 } |
| 46 | + // OR via your own custom translate formatter |
| 47 | + // { id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: translateFormatter, sortable: true, minWidth: 100 } |
| 48 | + ]; |
| 49 | + this.gridOptions = { |
| 50 | + autoResize: { |
| 51 | + containerId: 'demo-container', |
| 52 | + sidePadding: 15 |
| 53 | + }, |
| 54 | + enableAutoResize: true, |
| 55 | + enableTranslate: true |
| 56 | + }; |
| 57 | + |
| 58 | + this.loadData(); |
| 59 | + } |
| 60 | + |
| 61 | + // mock a dataset |
| 62 | + loadData() { |
| 63 | + this.dataset = []; |
| 64 | + for (let i = 0; i < 1000; i++) { |
| 65 | + const randomYear = 2000 + Math.floor(Math.random() * 10); |
| 66 | + const randomMonth = Math.floor(Math.random() * 11); |
| 67 | + const randomDay = Math.floor((Math.random() * 29)); |
| 68 | + const randomPercent = Math.round(Math.random() * 100); |
| 69 | + |
| 70 | + this.dataset[i] = { |
| 71 | + id: i, |
| 72 | + title: i, |
| 73 | + duration: Math.round(Math.random() * 100) + '', |
| 74 | + start: new Date(randomYear, randomMonth, randomDay), |
| 75 | + finish: new Date(randomYear, (randomMonth + 1), randomDay), |
| 76 | + completed: (i % 5 === 0) ? 'TRUE' : 'FALSE' |
| 77 | + }; |
| 78 | + } |
| 79 | + } |
| 80 | + |
| 81 | + switchLanguage() { |
| 82 | + this.selectedLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; |
| 83 | + this.translate.use(this.selectedLanguage); |
| 84 | + } |
| 85 | + |
| 86 | + // create a custom translate Formatter |
| 87 | + taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext) => { |
| 88 | + return this.translate.instant('TASK_X', { x: value }); |
| 89 | + } |
| 90 | +} |
0 commit comments