How Translate page size dropdown in TreeGrid

[c]

Hi team    

I would to translate the label: "items per page" and the label : "All" inside the dropdown list.

I use the component Treegrid

Do you know how I can translate this ?

Thanks you

[Farveen Sulthana Thameeztheen Basha]

Hi Customer, 

 

Thanks for contacting Syncfusion Support. 

 

Query#:- I would to translate the label: "items per page" and the label : "All" inside the dropdown list. 

We have checked your query and we can translate the Default text content in TreeGrid using Localization library. Using this, we can change the static text in TreeGrid such as toolbar area text, filter menu text, pager information text, etc.) into own customized text  by defining the locale value and translation object. 

As per your requirement we have changed the label of “Items per page” and “All” by customizing the text value of Locale keywords using “en-US” localization. 

Refer to the code example below:- 

L10n.load({ 

    'en-US': { 

        'pager': { 

             'pagerInfo': "{0} of {1} pages ({2} records)", 

              'firstPageTooltip': "Go to first page", 

              'lastPageTooltip': "Go to last page", 

              'nextPageTooltip': "Go to next page", 

              'previousPageTooltip': "Go to previous page", 

              'nextPagerTooltip': "Go to next Pager", 

              'previousPagerTooltip': "Go to previous  Pager", 

              'pagerDropDown': 'PageSize', 

              'All':'PagerAll' 

          }, 

        

        } 

    }); 

 

<TreeGridComponent dataSource={formatData} allowPaging={true} treeColumnIndex={1}  childMapping='subtasks' pageSettings={this.pageSettings} ref={g => 

    this.treegrid = g} > 

    <ColumnsDirective> 

        .   .    . 

   </ColumnsDirective> 

 

</TreeGridComponent> 

 

Note:- By default, locale value is en-US. If you want to change the en-US culture to a different culture, you have to change the locale accordingly. 

 

Screenshot:- 

 

Refer to the documentation Link:- 

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

 

Sample Link:- https://stackblitz.com/edit/react-frjhqp-5mzjrssd-adgoj2 

 

Please get back to us if you need any further assistance on it. 

 

Regards, 

Farveen sulthana T 

[c]

Hi Team,

Thanks you ! it's work.

But now, I get an error when I change my local.

I use a dropdown list with i18next for change the curracy language:

And when i save, my app reload and I get this error:

this.grid is equal to null and I don't know why ...

Then my code:

Thanks you for help

[Farveen Sulthana Thameeztheen Basha]

 

Hi Customer, 

 

Query#:- But now, I get an error when I change my local. this.grid is equal to null and I don't know why  

 

On analyzing the script Error, we suspect that this errors throws when we couldn’t access TreeGrid instance on Dropdown change. So please ensure that you have bind change event with this context to get the TreeGrid instance. Also from your provided details, we have dynamically changed the Locale on DropdownList change. But we are unable to replicate the problem at our end.  

Refer to the code example:- 

<DropDownListComponent id="ddlelement" change={this.onChange.bind(this)}  dataSource={this.sportsData} /> 

          

   <TreeGridComponent  dataSource={formatData}  allowPaging={true}  treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings}  ref={g => this.treegrid = g} height='220'> 

              

              .   .   . 

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

   </TreeGridComponent> 

 

Change event:- 

    onChange(args){ 

        .    .   . 

        var locale = args.value; 

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

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

        setCulture(locale); // Change the Grid culture 

         

     } 

Refer to the Screenshot:- 

 

 

Refer to the sample Link:- 

https://stackblitz.com/edit/react-frjhqp-zm1p88 

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

1. Share us the Video Demonstration to replicate the issue.
2. Have you faced on changing the settings in your app alone or else while on Dropdownlist change.
3. If possible replicate the issue in the above sample and revert us back.
4. Complete TreeGrid code example with details about how you have changed the Locale.
5. Syncfusion package version details.

From the above details we will replicate the issue at our end and provide you solution as early as possible. 

Regards, 

Farveen sulthana T