Localization not working in grid

[Dileep gagan R]

Hi,

We are trying to overwrite the grid control messages and button label using locale. but it is not working. Please suggest the actions.

setCulture('en-US');

 L10n.load({

      'en-US': {

        grid: {

          ConfirmDelete: 'Do You Want To Remove The Merchandise Hierarchy Record(s)?',

          CancelEdit: 'You Have Made Changes. If You Continue, Your Changes Will Be Discarded. Do You Want To Cancel Your Changes?',

          OKButton: 'Yes',

          CancelButton: 'No'

        }

      }

    });

<ejs-grid #grid [dataSource]="gridData" [searchSettings]='searchOptions' [locale]='en-US'

        [textWrapSettings]='wrapSettings' (actionBegin)="actionBegin($event)" (actionComplete)='actionComplete($event)'

        (toolbarClick)='toolbarClick($event)' [editSettings]="editSettings" [columns]="columns"

        [toolbar]="toolbarOptions" [allowPaging]="true" [pageSettings]="pageSettings" [allowSelection]="true"

        allowTextWrap='true' (load)='load($event)' [selectionSettings]="selectOptions"

        (rowSelecting)='rowSelecting($event)' [allowSorting]="true" [sortSettings]="sortOptions" allowScrolling="true"

        [height]="windowHeight" [rowHeight]='30'>

      </ejs-grid>

[Balaji Sekar]

Hi Dileep, 

 

Greetings from the Syncfusion support. 

 

Based on your query we have created a sample with “en-US” locale applied in the DataGrid component but in our sample it is override the default locale messages. 

 

In below code example we have overridden the default message of delete confirmation and also shared the screenshot with overridden message. 

 

[app.component.html] 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [allowResizing]="true" [toolbar]='toolbar' 

    [editSettings]="editSettings" [locale]='en-US'> 

    <e-columns> 

     .     .     .     .     

    </e-columns> 

  </ejs-grid> 

[app.component.ts] 

loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files 

 

const localede = { 

  "en-US": { 

    grid: { 

      EmptyRecord: "Keine Aufzeichnungen angezeigt", 

      GroupDropArea: 

        "Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte", 

      UnGroup: "Klicken Sie hier, um die Gruppierung aufheben", 

      EmptyDataSourceError: 

        "DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster", 

      Item: "Artikel", 

      Items: "Artikel", 

      ConfirmDelete: 

        "Do You Want To Remove The Merchandise Hierarchy Record(s)?", 

      CancelEdit: 

        "You Have Made Changes. If You Continue, Your Changes Will Be Discarded. Do You Want To Cancel Your Changes?", 

      OKButton: "Yes", 

      CancelButton: "No" 

    } 

  } 

}; 

 

setCulture("en-US"); // Change the Grid culture 

setCurrencyCode("EUR"); // Change the currency code 

L10n.load(localede); 

 

Screenshot: 

 

 

Sample link: https://stackblitz.com/edit/angular-wtifyf-gxl9vu  

 

Please get back to us, If you need further assistance. 

 

Regards, 

Balaji Sekar 

[Frédéric]

Hello, i try the exact same example, but that does not work. I cannot succeed to have the translation.

I have angular 12.1.4, webpack   5.41.0

syncfusion 19.2.49

i added those two lines in my tsconfig

    "resolveJsonModule": true,

    "esModuleInterop": true,

To be honest, I tried every single way that I could think and nothing seem to work.. what do you need to be able to help me?

[Rajapandi Ravi]

Hi Frédéric, 

Thanks for the update 

From your update, we could see that you are facing the locale problem with Angular 12. Based on your query we have prepared a sample with Angular 12 and checked your reported problem and try to reproduce the problem. But it was unsuccessful. The locale was applied in the Grid. Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/angular-vz8dwd?file=app.component.ts 

Screenshot: 

 

If you still face the issue, please share the below details that would be helpful for us to provide a better solution.  

1)   Please share your exact requirement with detailed description. 

2)   Please share your syncfusion package version. 

3)   Please replicate the issue with our above attached sample or share any issue reproducible sample that will be helpful for us to validate the problem. 

Regards, 

Rajapandi R