Localization library

[Grzegorz Golen]

Hi, in my project with Syncfusion I have following problem that after a few days of trying I still cannot resolve. Maybe could you give me some advice how to deal with such issue: 

 

The Localization library doesn’t work (I want to set the 'pl' location). For my grid I have tried to set the value of the locale as described in the documentation (please see the code sample below).

In addition, the load function of class L10n doesn’t work (also for set 'pl').

<div #container class='root-container'>
    <ejs-grid #grid [dataSource]='notificationData'  [locale]='pl' [allowPaging]="true" [editSettings]='editSettings' [toolbar]='toolbar' height='500px' [showColumnChooser]='true' [allowSorting]="true"
    [pageSettings]="pageSettings" [selectedRowIndex]=0 [allowFiltering]='true' [filterSettings]='filterOptions' (actionBegin)='actionBegin($event)' (actionComplete)="actionComplete($event)"
    [locale]='locale'>
        <e-columns>

For this reason, he can’t translate grid and datepicker components.

Please, kindly ask for help.

[Mohammed Farook J]

Hi Grzegorz, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your code and we suspect that the json files for locale formats are not properly imported in your application. Please find the steps for apply localization in Grid component. 

 

 

1. For importing JSON files in your component file, you need to  create and import new file with the following codes to your application.

[json-typings.d.ts] 

declare module "*.json" { 

        const value: any; 

        export default value; 

    } 

 

 

2. You need to load culture format files in ngOnInit function. Please find the below code example for your reference.

[code example] 

declare var require: any 

import { Component, OnInit } from '@angular/core'; 

import { loadCldr, setCulture, setCurrencyCode, L10n } from '@syncfusion/ej2-base'; 

 

    L10n.load({ 

        'fr-BE': { 

            'grid': { 

                'EmptyRecord': 'Aucun enregistrement.', 

                ... 

           }, 

            'pager': { 

                'currentPageInfo': '{0} de {1} Page(s)', 

                ... 

           } 

        } 

    }); 

 

@Component({ 

    selector: 'app-root', 

    templateUrl: './app.component.html', 

    styleUrls: ['./app.component.css'] 

}) 

export class AppComponent implements OnInit { 

    title = 'Front'; 

    public sidebar: SidebarComponent; 

 

    ngOnInit() { 

        setCulture('fr-BE'); 

        setCurrencyCode('EUR'); 

 

          loadCldr(require('cldr-data/main/fr-BE/currencies.json'), 

          require('cldr-data/main/fr-BE/numbers.json'), 

          require('cldr-data/main/fr-BE/ca-gregorian.json'), 

          require('cldr-data/main/fr-BE/timeZoneNames.json'), 

          require('cldr-data/supplemental/numberingSystems.json'));    //loading culture format files 

    } 

} 

 

 

 

Please get back to us if you need further assistance. 

 

 

Regards, 

J Mohammed Farook