Grid locale (with paging)

[Daniel Vasiliu]

Hello,

I'm trying to change the locale of a grid to a different language other than English. After carefully reading the documentation and trying different examples on StackBlitz found in other threads and resources with the same problem, I'm still not able to make it work.

I'm using Angular 19.2.0 and Syncfusion 29.2.4.

Can anyone help?

Thank you.

Below are the component template and the code file.

import { Component, inject, ViewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { DialogService } from '@core/components/dialog/dialog.service';
import { NomenclatoareService } from '../nomenclatoare.service';
import { GridComponent, GridModule, PageService, PageSettingsModel } from '@syncfusion/ej2-angular-grids'
import { L10n, setCulture } from '@syncfusion/ej2-base'


@Component({
  selector: 'app-nom-auto',
  imports: [MatButtonModule, GridModule],
  templateUrl: './nom-auto.component.html',
  styleUrl: './nom-auto.component.scss',
  providers: [PageService]
})
export class NomAutoComponent {


  constructor() {
    setCulture('ro-RO');


    L10n.load({
      'ro-RO': {
        grid: {
          EmptyRecord: 'Nu există înregistrări',
          Item: 'element',
          Items: 'elemente',
          TotalItems: 'Total înregistrări',
          PagerInfo: '{0} din {1} pagini ({2} elemente)',
          All: 'Toate'
        }
      }
    })
  }


  @ViewChild("grid") grid: GridComponent | undefined


  _dialog = inject(DialogService)
  _serv = inject(NomenclatoareService)


  pageSize: number = 20
  pageSettings: PageSettingsModel = { pageSize: this.pageSize }
  lista: any = { result: [], count: 0 }


  ngOnInit() {
    this._serv.getListaAuto(true).subscribe(res => {
      if (!res) return


      this.pageSettings = { pageSize: this.pageSize, totalRecordsCount: res.data?.recCount!! }


      this.getPage(1)
    })
  }


  getPage(pageNo: number) {
    this._serv.getListaAuto(false, pageNo, this.pageSize, "numar").subscribe(res => {
      if (!res) return


      this.lista = {
        result: res.data?.lista ?? [],
        count: res.data?.recCount ?? 0
      }
      this.pageSettings = { pageSize: this.pageSize, totalRecordsCount: res.data?.recCount ?? 0 }
    })
  }


  dataStateChange(event: any): void {
    if (event.action.requestType === 'paging') {
      const currentPage = event.action.currentPage
      this.getPage(currentPage)
    }
  }
}


<ejs-grid
  #grid
  [dataSource]="lista"
  width="600"
  locale="ro-RO"
  [allowPaging]="true"
  [pageSettings]="pageSettings"
  (dataStateChange)="dataStateChange($event)">
  <e-columns>
    <e-column field="numar" headerText="Număr auto" width="100"></e-column>
    <e-column field="nume" headerText="Nume" width="100"></e-column>
    <e-column field="consum" headerText="Consum" textAlign="right" width="70"></e-column>
  </e-columns>
</ejs-grid>

[Santhosh Iruthayaraj]

Hi Daniel Vasiliu,

Greetings from Syncfusion Support.

Based on the details you provided, we have observed that some of the locale keywords were misspelled and certain keywords were placed under incorrect sections. As a result, the localization did not function as expected. We have prepared a corrected translation object that aligns with your requirements, as shown below:

 

L10n.load({

  'ro-RO': {

    grid: {

      EmptyRecord: 'Nu există înregistrări',

      Item: 'element',

      Items: 'elemente',

    },

    pager: {

      totalItemsInfo: 'Total înregistrări',

      currentPageInfo: '{0} din {1} pagini ({2} elemente)',

      All: 'Toate',

    },

  },

});

 

As illustrated in the translation object above, the pager-related keywords must be defined under the "pager" section. Additionally, each keyword is case-sensitive, so accurate spelling and casing are essential for proper localization.

For more details regarding localization and the complete list of available keywords, please refer to the following documentation:

Documentation: Localization in Angular Grid component | Syncfusion

To assist you further, we have also included a translation object that covers all applicable keywords for both the Grid and Pager components. You can find it in the following sample file: "ro-RO.ts".

Sample: https://stackblitz.com/edit/angular-grid-u7mdtf-57mckoro

Please feel free to customize the values of the keywords according to your application needs. If you require any further assistance, kindly let us know.

Regards,

Santhosh I

[Daniel Vasiliu]

Hi,

I solved this by installing th @syncfusion/ejs2-base package which was not previously installed. There was no error on the L10n.load line event without this package installed, but the translation was not working.

Thank you!

[Santhosh Iruthayaraj]

Hi Daniel Vasiliu,

We’re glad to hear the localization is now working as expected.

To clarify the behavior: The “@syncfusion/ej2-base” package is internally used by the Grid component and several other Syncfusion components. This package provides the core localization functionality, including methods like “L10n.load” and “setCulture”.

In most cases, this dependency is automatically resolved when installing our UI components. However, depending on your project setup or how dependencies are managed, it might not be included in the final build unless it is explicitly listed in your “package.json”. This can lead to a situation where no errors are shown, but the localization simply doesn’t take effect at runtime.

By explicitly installing “@syncfusion/ej2-base”, the required localization logic became available, allowing your translations to work as intended.

If you have any further questions or need assistance with anything else, feel free to let us know.

Regards,

Santhosh I