Localization of Sync-fusion Grid Headings

[Ajanth R]

I am using the i18n plugin for the localization in our Aurelia application. But, the localization is not getting applied to the column headings dynamically on Sync-fusion grid in our Aurelia app.

 

The HTML code for the Grid is as below.

 

   <ej-grid id="gvDownline"  e-locale.bind="locale" 

               e-data-source.bind="downlines"

               e-page-settings.bind="pageSettings"

               e-allow-paging=true

               e-allow-sorting=true

               e-allow-text-wrap=true

               e-text-align="center">

        <ej-column e-width="80"    e-field="level" e-header-text="${i18n.tr('Downline.Level')}" e-text-align="right">

        </ej-column>

        <ej-column e-field="sponsor" e-header-text="${i18n.tr('Downline.Sponsor')}" e-text-align="left">

        </ej-column>

        <ej-column e-field="sponsorEmail" e-header-text="${i18n.tr('Downline.SponsorEmail')}" e-text-align="center">

        <ej-column e-field="associate" e-header-text="${i18n.tr('Downline.Associate')}" e-text-align="center">

        <ej-column e-field="registeredFlag" e-width="130" e-header-text="${i18n.tr('Downline.Registered')}" e-text-align="right">

        </ej-column>

        <ej-column e-field="contractSignedDate"  e-format="{0:dd/MM/yyyy}" e-header-text="${i18n.tr('Downline.ContractSignedDate')}" e-text-align="right">

        </ej-column>

      </ej-grid>

 

In the code behind I have imported the following file for the localization of pagination and other grid components.

 

import 'syncfusion-ej-global/l10n/ej.localetexts.it-IT.min';

 

We are providing ${i18n.tr('key') as the e-header-text attribute for columns to get it translated.

 

In my page, there are two language options. When I change the language options, I need the localization to be applied to the grid header based on the selected language. When I applied the “e-locale.bind="locale" property in the grid, the localization is applied to the pagination and status information of the sync-fusion grid, but not applied on the grid headers.

 

 

 I have to do a page reload for applying the localization of the header after each language switching. Actually, I need to set the header text from the code behind(ts file) on the language change event. Can anyone suggest a better way to implement the localization of the sync fusion grid in Aurelia.

[Thavasianand Sankaranarayanan]

Hi Ajanth, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to change the header text value when we change the localization where applied. By default, if we change the localization to Grid then we change some of APIs were changed. But in your case you need to change the header text value.  

We can also programmatically refresh the Grid content with the refreshHeader and setWidthToColumns method from external action as shown in the following code example. 

        var gridObj = $("#FlatGrid").ejGrid('instance'); 

 

        gridObj.model.columns[0].headerText = "New Column Name"; /* insert the new column name for the first column in Grid*/ 

 

        gridObj.refreshHeader(); 

        gridObj.setWidthToColumns(); 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-headertext 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:refreshheader 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:setwidthtocolumns 

Regards, 

Thavasianand S.