Support for multiple languages

[Alexander Petzelt]

Hi!

I need to support multiple languages in my react (TS) project.
I need to do  that in different components starting with the TreeGrid.

 

Everything I found was that I need to use the cldr libaray, import some files, use loadCldr and set the culture (using setCulture) and setCurrencyCode (why if I set the culture first???) to get the correct currency.

OK – so my question no 1 is: how to dynamically load different languages from cldr to use it in loadCldr?

The second problem is that I need to load different labels for the TreeGrid using L10n.load. Do I really need to create the JSON data for every language I need to support or is there an easier way so I just can say – choose local de or es or fr and I get the standard names for every part of the component?

 If I need to set every string myself and I want to correctly show a text for one and multiple items found: how can I do this setting totalitemsinfo once would not be enough!?!

 Any help is appreciated.

 Kind regards
Alex

[Farveen Sulthana Thameeztheen Basha]

Hi Alexander, 

Thanks for contacting Syncfusion Support. 

Query#:- how to dynamically load different languages from cldr to use it in loadCldr? 

We have checked your query and For Internationalization and localization, you need to include cldr files into your application. You need to download cldr-data globally in any location by using below command.  

 Command:  

npm install cldr-data  

  

After installing cldr-data, you can find cldr-data for all locale in this location(node_modules->cldr-data->main). You need to copy the required(or all) locale cldr-data and paste into your application folder(Scripts->cldr->main->paste copied cldr files).  

By default, default  culture used for TreeGrid component is en-US  so in the below sample, we have change the culture to “de” in button click.  

  

• Import the L10n and setCulture etc, from ej2-base

  

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

  

• Load the corresponding culture file using loadCldr method

  

import * as cagregorian from "./ca-gregorian.json";  

import * as currencies from "./currencies.json";  

import * as numbers from "./numbers.json";  

import * as timeZoneNames from "./timeZoneNames.json";  

  

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

  

  

• Then dynamically change the locale and load the locale string using L10n and use setCulture , setCurrencyCode(based on the cldr file it apply format for the columns) for internalization.

  Refer to the code example:- 

    

   

return (<div className='control-pane'> 

                <div className='control-section'> 

                  <div className='div-button'> 

                        <ButtonComponent cssClass={'e-info'} onClick={this.onclick.bind(this)}>Change Locale</ButtonComponent> 

                 </div> 

        <TreeGridComponent  dataSource={formatData}  allowPaging={true}  treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings}  DataBound={this.DataBound} allowFiltering='true' filterSettings={this.FilterOptions}  height='220'> 

              <ColumnsDirective> 

                   .     .      . 

            </ColumnsDirective> 

            <Inject services={[Page, Filter, Toolbar]}/> 

        </TreeGridComponent> 

            </div> 

          </div>) 

<script> 

     onclick() { 

       this.cultureChange = true; 

        var treeGridobj = document.getElementsByClassName("e-treegrid")[0].ej2_instances[0]; 

        treeGridobj.locale='de'; // need to dynamically change the locale for treegrid 

        L10n.load(localede); // load corresponding culture text  

        setCulture('de'); // Change the Grid culture 

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

      } 

    </script> 

Sample Link:-  https://stackblitz.com/edit/react-frjhqp-qsjnnp?file=index.js 

Documentation Link for more information:- 

https://ej2.syncfusion.com/react/documentation/treegrid/global-local/#localization 

https://ej2.syncfusion.com/react/documentation/common/localization/ 

Query#2:- I need to load different labels for the TreeGrid using L10n.load. Do I really need to create the JSON data for every language I need to support or is there an easier way so I just can say – choose local de or es or fr and I get the standard names for every part of the component? 

 

If you want to change the different labels for TreeGrid alone you can load it from using L10.load based on culture you have used. Other than that you need to change date and Currency format you can refer the locale Json files from cldr. 

 

Query#3:- If I need to set every string myself and I want to correctly show a text for one and multiple items found: how can I do this setting totalitemsinfo once would not be enough!?! 

 

From your query we suspect that you need to customize the locale value totalitemsinfo for the Pager in TreeGrid.  By default when we set culture for the TreeGrid we need to load files from using load function of the L10n class which will display localized value. In this load function of the corresponding culture you can set your own customized value for totalItemInfo. 

 

<script> 

 

    L10n.load({ 

        'de': { 

            'pager': { 

                'currentPageInfo': '{0} von {1} Seiten', 

                'firstPageTooltip': 'Zur ersten Seite', 

                'lastPageTooltip': 'Zur letzten Seite', 

                'nextPageTooltip': 'Zur nächsten Seite', 

                'nextPagerTooltip': 'Zum nächsten Pager', 

                'previousPageTooltip': 'Zurück zur letzten Seit', 

                'previousPagerTooltip': 'Zum vorherigen Pager', 

                'totalItemsInfo': '({0} Beiträge)'     //customize with your own localized text 

            }, 

            'treegrid': { 

                "ClearButton": "klar", 

                'Collapse All': 'Alles einklappen', 

                "Contains": "Enthält", 

                .   .    . 

           } 

        } 

    }); 

</script> 

 

If your requirement is different from above, please get back to us with further details. 

Regards, 

Farveen sulthana T 

[Alexander Petzelt]

Hi!

I have read the documentation, so there is no need to repeat it. 😉

Regarding question 1:
As I stated, I need to support multiple languages. So a static support of one language is not enough!
Why do I need to copy the files into my source-folder when using static imports? I can directly refer to the node_modules folder.

Regarding question 2:
I found a npm package called @syncfustion/ej2-locale. So there are standard-labels for all components but I need to implement the same mechanism as in question 1.

Regarding question 3:
You didn’t understand what I mean. There is just one element that is localized (totelItemsInfo). The problem is: this is grammatically wrong! You need text for one value and another for 0 or multiple values (i.e. 1 item/0- or n-itemS)

There is a fourth issue: How do I localize date values in a treegrid just using loadCldr? This did not work for me.

Kind regards
Alex

[Farveen Sulthana Thameeztheen Basha]

Hi Alexander, 

 

We have forwarded the 3^rd query( totalItemsInfo related) to corresponding dependent team and provide you cumulative response for all queries by 17^th July 2020. 

 

Regards, 

Farveen sulthana T 

[Manivannan Padmanaban]

Hi Alexander, 

  

Query1 and Query2:- Why do I need to copy the files into my source-folder when using static imports? I can directly refer to the node_modules folder. 

Regarding question 2: I found a npm package called @syncfustion/ej2-locale. So there are standard-labels for all components but I need to implement the same mechanism as in question 1. 

  

We have predefined Locale translations for Essential JS 2 components in multiple languages. To load translation object in Essential JS 2 components, yes you can load locale object in L10.load function from EJ2 base library without using static import. 

  

For your reference, we have created a sample and dynamically load cldr-data and change the culture in button click. You can also achieve your requirement using the below way.   

Refer to the code example:- 

  

loadCldr(  // loding cldr-data 

  require('cldr-data/supplemental/numberingSystems.json'), 

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

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

  require('cldr-data/main/de/currencies.json'), 

  require('cldr-data/main/de/timeZoneNames.json')); 

  

setCulture('de');     //set the culture 

setCurrencyCode('EUR');  //set the Currencycode 

  

L10n.load(require('@syncfusion/ej2-locale/src/de.json'));  // load corresponding culture text 

  

  render() { 

    return <div><button onClick={this.buttonClick.bind(this)}>Chinese</button> 

        <TreeGridComponent dataSource={Data} locale='de' ref={g => this.treegrid = g} treeColumnIndex={1} childMapping='subtasks' editSettings={this.editSettings} allowPaging={true} toolbar={this.toolbarOptions}  > 

       <ColumnsDirective> 

              <ColumnDirective field='taskID' headerText='ID' width='70' textAlign='Right' isPrimaryKey={true}/> 

              .   .    . 

        </ColumnsDirective> 

        <Inject services={[Page, Edit, Toolbar]} /> 

      </TreeGridComponent> 

         </div> 

  } 

  

buttonClick(args) {   // dynamically change while on button click 

    loadCldr( 

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

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

      require('cldr-data/main/zh/currencies.json'), 

      require('cldr-data/main/zh/timeZoneNames.json')); 

      this.treegrid.locale = 'zh'; // need to change the locale dynamically for grid 

      L10n.load(require('@syncfusion/ej2-locale/src/zh.json')); // load corresponding culture text  

     setCulture('zh'); // Change the Grid culture 

     setCurrencyCode('CNY');// Change the currency code 

  } 

  

Sample Link:- https://www.syncfusion.com/downloads/support/forum/155948/ze/TreeGrid-1546862599.zip 

  

Query#2:- You didn’t understand what I mean. There is just one element that is localized (totelItemsInfo). The problem is: this is grammatically wrong! You need text for one value and another for 0 or multiple values (i.e. 1 item/0- or n-itemS) 

  

We are able to reproduce the reported issue at our end and we have considered “The Pager text was grammatically wrong” as a defect and logged a report for the same. We will include the defect fix in our upcoming Aug 5^th , 2020 patch release.  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Feedback link : https://www.syncfusion.com/feedback/16158/the-pager-text-was-grammatically-wrong  

  

Query#3:- How do I localize date values in a treegrid just using loadCldr? This did not work for me. 

  

We have imported translation from loadCldr and applied “de” culture but we are unable to reproduce the problem at our end(date values has been localized properly). Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/forum/155948/ze/TreeGrid-1546862599.zip 

  

Refer to the screenshot:- 

 

  

We need some more additional details to find the cause of the issue. Share us the following details. 

  

1. Complete TreeGrid code example(Along with that how you have referred the cldr-data and culture files from Localization).
2. Screenshot/Video Demo to replicate the issue.
3. Syncfusion package version details.

        

  

Please let us know if you need any further assistance. 

  

Regards, 

Manivannan Padmanaban