How can I translate the ColumnChooser of a grid?

[Jan]

I am using a Grid component, and in its toolbar configuration, I have the following items:

this.toolbarOptions = [
      {
        text: '',
        id: 'ExcelExport',
        prefixIcon: 'icon-Property-1EXCEL',
        align: 'Left',
        tooltipText: 'Export to EXCEL'
      },
      {
        text: '',
        id: 'CsvExport',
        prefixIcon: 'icon-Property-1CSV',
        align: 'Left',
        tooltipText: 'Export to CSV'
      },
      {
        text: '',
        id: 'PdfExport',
        prefixIcon: 'icon-Property-1PDF',
        align: 'Left',
        tooltipText: 'Export to PDF'
      },
      {
        text: 'ColumnChooser',
        id: 'target_columnchooser',
        align: 'Right',
      },
];

After that, I used the setCulture() and L10n.load() functions to perform the grid translation:

setCulture('es');
L10n.load({
  es: translations.es
});

In the translation file, I have the following information:

export let translations = {

  es: {
    grid: {
      ColumnChooser: 'Selector de columnas',
    }
  }
};

If I translate other parts of the grid, for example, the paginator, and define its translation in the translation file, the change is reflected in the component view. However, when trying to translate the ColumnChooser, the language does not change.

How can I achieve translating the component? The goal is to translate it to Spanish.

[Santhosh Iruthayaraj]

Hi Jan,

Greetings from Syncfusion support.

localization is applicable only to the built-in toolbar items. When creating your own custom toolbar item, the localization does not automatically change the text on the items based on the culture. Please find the below code and sample for more information:

[app.component.ts]

 

this.toolbarOptions = [

      {

        text: '',

        id: 'ExcelExport',

        prefixIcon: 'icon-Property-1EXCEL',

        align: 'Left',

        tooltipText: 'Export to EXCEL',

      },

      {

        text: '',

        id: 'CsvExport',

        prefixIcon: 'icon-Property-1CSV',

        align: 'Left',

        tooltipText: 'Export to CSV',

      },

      {

        text: '',

        id: 'PdfExport',

        prefixIcon: 'icon-Property-1PDF',

        align: 'Left',

        tooltipText: 'Export to PDF',

      },

      'ColumnChooser',

];

 

Sample: https://stackblitz.com/edit/angular-gafkfw

Please let us know if you have any further queries.

Regards,

Santhosh I

[Jan]

Thank you very much, the translation of the column chooser really works for me in the way you proposed in the example.

[Santhosh Iruthayaraj]

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance. 

Regards,
Santhosh I