Internationalization not work

Question

Hello guys, I'm trying to use Internationalization to translate and work with value in currencies and dates in the correct format, I'm following this documentation:

https://ej2.syncfusion.com/vue/documentation/common/internationalization/#internationalization

I followed all the steps but everything remains the same in en-US.

my code:

import Vue from "vue";
import fcload from '../../components/mixins/fcload';
import fcconn from '../../components/mixins/fcconn';
import fcgeral from '../../components/mixins/fcgeral';
import { DialogUtility } from '@syncfusion/ej2-vue-popups';
import VendaLancaPlanos from './VendaLancaPlanos'
import VendaAvulsa from './VendaAvulsa'
import BoletoAvulso from './BoletoAvulso';
import ConfirmaPagamentos from './ConfirmaPagamentos';
import VendaDetalheGrid from './VendaDetalheGrid';

import { GridPlugin, Sort, Page, Toolbar, Group, CommandColumn, DetailRow, PdfExport, ExcelExport, Aggregate } from "@syncfusion/ej2-vue-grids";
import { L10n, setCulture, setCurrencyCode, loadCldr } from '@syncfusion/ej2-base';
import * as currencies from "@/currencies.json"; 
import * as gregorian from "@/ca-gregorian.json"; 
import * as numbers from "@/numbers.json"; 
import * as timeZoneNames from "@/timeZoneNames.json"; 
import * as currencyData from "@/currencyData.json"; 
import * as numberingSystems from "@/numberingSystems.json"; 

loadCldr(currencies, gregorian, numbers, timeZoneNames, currencyData, numberingSystems); 

setCulture('pt');
setCurrencyCode('BRL');

L10n.load({
    'pt': {
        'grid': {
            'EmptyRecord': 'Nenhum registro para exibir',
            'GroupDropArea': 'Arraste uma coluna aqui para agrupar',
            'UnGroup': 'Clique aqui para desagrupar',
            'EmptyDataSourceError': 'A fonte de dados está vazia',
            'Item': 'Item',
            'Items': 'Itens',
            'Search': 'Buscar',
            'Pdfexport': 'Exportar PDF', 
            'Excelexport': 'Exportar Excel'
        },
        'pager':{
            'currentPageInfo': '{0} de {1} Páginas',
            'totalItemsInfo': '({0} Itens)',
            'firstPageTooltip': 'Ir para primeira página',
            'lastPageTooltip': 'Ir para última página',
            'nextPageTooltip': 'Próxima página',
            'previousPageTooltip': 'Página anterior',
            'nextPagerTooltip': 'Próxima página',
            'previousPagerTooltip': 'Página anterior',
            'pagerDropDown' : 'Itens por página'
        }
    }
});

Vue.use(GridPlugin);

I actually wanted to do this configuration across the application for all syncfusion components, what am I doing wrong?

thanks!

Rajapandiyan Settu · Accepted Answer

Hi Murilo, 

Greetings from syncfusion support. 

Query :  I'm trying to use Internationalization to translate and work with value in currencies and dates in the correct format 

We have tried to reproduce the reported behavior at our end, but it was unsuccessful at our end. internalization in Grid is working fine, please find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_internalization468636198.zip  

We suspect that you have using a different culture name in your project. We suggest you to maintain the culture name as same in all the places you have used. Please find the below code and screenshot for your reference. 

  

  

  

  

  

If you still face the same issue, please share the below details to validate further with this. 


Share the simple issue reproducible sample with us.
Share the package.json file.

Regards, 
Rajapandiyan S

Murilo · Answer

Thanks for responding, a small example showing the problem is attached.Attachment: syncinter_d4099197.rar

Murilo · Answer

hello, did you see the example?

Murilo · Answer

Hello, with your demo project it worked, but in my project it doesn't work, even if the files are "pt" if I put 'EUR' or 'USD' it works, any other currency doesn't work.

setCurrencyCode("BRL"); NOT WORK

setCurrencyCode("EUR"); WORK
setCurrencyCode("USD"); WORK

it looks like it's not loading the .json files from the root ... I don't know what else to do ..

Attachment: ClientApp_e1972e6d.rar

Praveenkumar Gajendiran · Answer

HI Murilo,Sorry for the delay in getting back to you. 
We have checked your sample and we are able to reproduce the reported issue only in your sample. We have tired the same behavior in our sample and everything works fine.Currently we are validating your sample with our source and we will update the further details at the earliest.We appreciate your patience until then.Regards,Praveenkumar G

Murilo · Answer

thank you very much for replying, i will look forward to it.

Praveenkumar Gajendiran · Answer

Hi Murilo,You are welcome. We will update you further once the validation is completed.We appreciate your patience until then.Regards,Praveenkumar G

Praveenkumar Gajendiran · Answer

Hi Murilo,Thanks for your valuable patience.We validated your sample and the reported problem occurred as the external JSON was not loaded properly. So, the default culture is automatically loaded in your sample.  

Now, we have resolved your problem by using “require” method in loadCldr function as demonstrated in the below code example.Code Example: 




import { L10n, setCulture, setCurrencyCode, loadCldr } from '@syncfusion/ej2-base'; 
 
 
loadCldr(require('./currencies.json'),                 
      require('./numbers.json'),  
      require('./ca-gregorian.json'),  
      require('./timeZoneNames.json'),  
      require('./numberingSystems.json'));  
 
setCulture('pt'); 
setCurrencyCode('BRL'); 
Screenshot: 




  
We have modified your provided sample for your reference.Sample: https://www.syncfusion.com/downloads/support/forum/158902/ze/SYNCIN~11974863221.zip 
Please get back to us if you need further assistance. Regards,Praveenkumar G

Murilo · Answer

it worked really well, thanks!

Praveenkumar Gajendiran · Answer

Hi Marilo, 

You are welcome. We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Praveenkumar G

Murilo · Answer

Even using require (...) as stated, the date and time formatting in the grid is not yet in the correct format that would be

dd/MM/yyyy hh:mm:ss

and the datePicker component is also not translated

app.vue

import { L10n, setCulture, setCurrencyCode, loadCldr } from '@syncfusion/ej2-base';
loadCldr(
      require('./currencies.json'),                 
      require('./numbers.json'),  
      require('./ca-gregorian.json'),  
      require('./timeZoneNames.json'),  
      require('./weekData.json'),  
      require('./numberingSystems.json')
);
setCulture('pt');
setCurrencyCode('BRL');

L10n.load({
    'pt': {
        "grid": {
            "EmptyRecord": "Nenhum registro para exibir",
            "True": "verdadeiro",
            "False": "falso",
            "InvalidFilterMessage": "Filtro inválido",
            "GroupDropArea": "Arraste uma coluna aqui para agrupar",
            "UnGroup": "Clique aqui para desagrupar",
            "GroupDisable": "Agrupamento desabilitado para esta coluna",
            "FilterbarTitle": "\"s celula da barra de filtro",
            "EmptyDataSourceError": "DataSource não deve estar vazio no carregamento inicial, pois as colunas são geradas a partir de dataSource em AutoGenerate Column Grid",
            "Add": "Adicionar",
            "Edit": "Editar",
            "Cancel": "Cancelar",
            "Update": "Atualizar",
            "Delete": "Excluir",
            "Print": "Imprimir",
            "Pdfexport": "Exportar PDF",
            "Excelexport": "Exportar Excel",
            "Wordexport": "Exportar Word",
            "Csvexport": "Exportar CSV",
            "Search": "Buscar",
            "Columnchooser": "Colunas",
            "Save": "Salvar",
            "Item": "Item",
            "Items": "Itens",
            "EditOperationAlert": "Nenhum registro selecionado para edição",
            "DeleteOperationAlert": "Nenhum registro selecionado para exclusão",
            "SaveButton": "Salvar",
            "OKButton": "OK",
            "CancelButton": "Cancelar",
            "EditFormTitle": "Detalhes de",
            "AddFormTitle": "Adicionar registro",
            "BatchSaveConfirm": "Tem certeza que deseja salvar as alterações?",
            "BatchSaveLostChanges": "As alterações não salvas serão perdidas. Você tem certeza que quer continuar?",
            "ConfirmDelete": "Tem certeza de que deseja excluir o registro?",
            "CancelEdit": "Tem certeza que deseja cancelar as alterações?",
            "ChooseColumns": "Escolha as colunas",
            "SearchColumns": "Colunas de pesquisa",
            "Matchs": "Nenhuma combinação encontrada",
            "FilterButton": "Filtro",
            "ClearButton": "Limpar",
            "StartsWith": "Começa com",
            "EndsWith": "Termina com",
            "Contains": "Contem",
            "Equal": "Igual",
            "NotEqual": "Diferente",
            "LessThan": "Menor que",
            "LessThanOrEqual": "Menor ou igual",
            "GreaterThan": "Maior que",
            "GreaterThanOrEqual": "Maior ou igual",
            "ChooseDate": "Escolha uma data",
            "EnterValue": "Insira o valor",
            "Copy": "Copiar",
            "Group": "Agrupar por este coluna",
            "Ungroup": "Desagrupar por este coluna",
            "autoFitAll": "Ajustar automaticamente todas as colunas",
            "autoFit": "Ajustar esta coluna automaticamente",
            "Export": "Exportar",
            "FirstPage": "Primeira página",
            "LastPage": "Última página",
            "PreviousPage": "Página anterior",
            "NextPage": "Próxima página",
            "SortAscending": "Ordernar ascendente",
            "SortDescending": "Classificar em ordem decrescente",
            "EditRecord": "Editar registro",
            "DeleteRecord": "excluir conjunto de dados",
            "FilterMenu": "Filtrar",
            "SelectAll": "Escolha tudo",
            "Blanks": "Espaços",
            "FilterTrue": "Verdadeiro",
            "FilterFalse": "Falso",
            "NoResult": "Nenhuma combinação encontrada",
            "ClearFilter": "Filtros claros",
            "NumberFilter": "Número de filtros",
            "TextFilter": "Filtros texto",
            "DateFilter": "Filtros data",
            "DateTimeFilter": "Filtro data/hora",
            "MatchCase": "Maiúsculas / minúsculas",
            "Between": "Entre",
            "CustomFilter": "Filtros personalizados",
            "CustomFilterPlaceHolder": "Insira um valor",
            "CustomFilterDatePlaceHolder": "Escolha uma data",
            "AND": "e",
            "OR": "ou",
            "ShowRowsWhere": "Mostrar linhas em que:"
        },
        'pager':{
            'currentPageInfo': '{0} de {1} Páginas',
            'totalItemsInfo': '({0} Registros)',
            'firstPageTooltip': 'Para a primeira página',
            'lastPageTooltip': 'Para a última página',
            'nextPageTooltip': 'Para a próxima página',
            'previousPageTooltip': 'Voltar para a última página',
            'nextPagerTooltip': 'Para a próxima página',
            'previousPagerTooltip': 'Para a página anterior'
        },
         'daterangepicker': {
           placeholder: 'Selecione uma área',
           startLabel: 'Escolha a data de início',
           endLabel: 'Escolha a data de término',
           applyText: 'Aplique',
           cancelText: 'Cancelar',
           selectedDays: 'Dias selecionados',
           days: 'Dias',
           customRange: 'área personalizada'
        },
        "datepicker": {
        today:'Hoje',
        placeholder: 'escolha uma data'
      }
    }
});

datetimepicker

why does one component work correctly in the crop and another does not?

the currency was formatted correctly with BRL, the date was not already, this being in the same grid.

I also tried to use column formatting

formatDt: {format: 'dd/MM/yyyy hh:mm', type: 'datatime'},

thanks!!

Praveenkumar Gajendiran · Answer

Hi Murilo,We would like to inform you that by default, Grid column type will be set based on your values in the dataSource. But we could see that in your code you have using string value in the date column and not defining the column type as date. That’s why the problem occurs.If you have using valued date string and set column type as date, Grid will convert the valued date string to the date value and set the format you have defined, but preforming Grid action like Editing, Searching, Grouping, Sorting, etc., we need date value as date object value. So we suggest you to change the date value as date object (new Date()) in your dataSource.And the datepicker component in the Grid is translated properly. Please refer the below code example and sample for more information.Code Example: [dataSource.js] export let datas= [ { cod :10, coduser :331, codsoft :1, datavenda :new Date(8364186e5), datavencimento :new Date(8364186e5), valor :697, multa :0, juros :0, total :697, nparc :5, parcelas :"5/6", pago :"SIM", detalhes :null, datapagamento :new Date(8364186e5), modopag :"CHEQUE", numdoc :"850676", statuspag_pags :"0", tokenpag_pags :null, codvenda :0, linkbol :"", geradoem :"SITE", codvendedor :0, desconto :0, razaosocial :"A Hospitalar Assistencia t\u00E9cnica LTDA", cpfcnpj :"00797514000110"} ]; Screenshot: Sample: https://www.syncfusion.com/downloads/support/forum/158902/ze/SYNCIN_11974863221-1747076658.zipIf you still face the same issue, please share the below details to validate further with this. Share the simple issue reproducible sample with us. Share the package.json file. Regards,Praveenkumar G