Get Started with Localization

Localization

All Smart UI components support localization - the process of adapting software to both the culture and language of an end user. All information such as text content, numeric and date formats and built-in Error messages thrown by the Custom Elements can be customized and set to multiple languages/cultures.

Setup Blazor Grid

The demo below will showcase how to dynamically switch Smart.Grid's langauge between two different options - English and Italian.

  1. Follow the Getting Started guide to set up Smart UI in your Blazor project

  2. Create a Smart.Grid element and two radio buttons in the Index.razor page: 
    <RadioButton Checked OnCheckValue="EnglishTranslation">English</RadioButton>
<RadioButton OnCheckValue="ItalianTranslation">Italian</RadioButton>
<Grid @ref="grid" DataSource="@Clients" Header="@header" Filtering="@filtering" Sorting="@sorting" 
Grouping="@grouping" Messages="@messages" Locale="@locale">
    <Columns>
        <Column DataField="Name" Label="Client Name"></Column>
        <Column @ref="balanceColumn" DataField="Balance" Label="Acccount Balance" DataType="number"  CellsFormat="c2"></Column>
        <Column DataField="City" Label="City"></Column>
        <Column DataField="Country" Label="Country"></Column>
        <Column @ref="lastOrderColumn" DataField="LastOrder" Label="Last Order" DataType="date" CellsFormat="d"></Column>
    </Columns>
</Grid>
  3. Then inside @code block, set the grid's properties: 
    @code {
  Grid grid;
  Column balanceColumn;
  Column lastOrderColumn;
  string locale = "en";

  GridHeader header = new GridHeader()
  {
      Visible = true,
      Buttons = new string[] { "columns", "filter", "sort", "group", "search" }
  };
  GridSorting sorting = new GridSorting() { Enabled = true };
  GridFiltering filtering = new GridFiltering() { Enabled = true };
  GridGrouping grouping = new GridGrouping() { Enabled = true };
  class Client {
    public string Name { get; set; }
    public double Balance { get; set; }  
    public string City { get; set; }
    public string Country { get; set; }  
    public DateTime LastOrder {get; set; }

    public Client(string name, double balance, string city, string country, DateTime lastOrder){
      Name = name;
      Balance = balance;
      City = city;
      Country = country;
      LastOrder = lastOrder;
    }
  }
  Client[] Clients = new Client[] 
  {
    new Client("Maria Anders",130.00,"Berlin", "Germany", new DateTime(2022, 01, 6)),
    new Client("Ana Trujillo",230,"Mxico D.F.", "Mexico", new DateTime(2020, 05, 02)),
    new Client("Antonio Moreno",-3500,"Mxico D.F.", "Mexico", new DateTime(2021, 03, 24)),
    new Client("Thomas Hardy",55,"London", "UK", new DateTime(2022, 01, 02)),
    new Client("Christina Berglund",132.86,"Lule", "Sweden", new DateTime(2022, 01, 20)),
    new Client("Hanna Moos",85,"Mannheim", "Germany", new DateTime(2019, 10, 02)),
    new Client("Frdrique Citeaux",35.424,"Strasbourg", "France", new DateTime(2022, 07, 02)),
    new Client("Martn Sommer",0,"Madrid", "Spain", new DateTime(2020, 11, 02)),
    new Client("Elizabeth Lincoln",-140,"Marseille", "France", new DateTime(2022, 02, 14)),
    new Client("Victoria Ashworth",200,"Tsawassen", "Canada", new DateTime(2022, 06, 4)),
    new Client("Patricio Simpson",59.55,"London", "UK", new DateTime(2020, 01, 02)),
    new Client("Francisco Chang",100,"Buenos Aires", "Argentina", new DateTime(2022, 02, 02)),
    new Client("Yang Wang",107.44,"Mxico D.F.", "Mexico", new DateTime(2022, 01, 02)),
    new Client("Pedro Afonso",-200,"Bern", "Switzerland", new DateTime(2014, 01, 02)),
    new Client("Elizabeth Brown",-390,"Sao Paulo", "Brazil", new DateTime(2022, 05, 6)),
    new Client("Sven Ottlieb",70,"Berlin", "Germany", new DateTime(2020, 01, 23)),
    new Client("Janine Labruneo",135.50,"Nantes", "France", new DateTime(2022, 6, 8)),
    new Client("Ann Devon",0,"London", "UK", new DateTime(2021, 05, 2)),
    new Client("Roland Mendel",50,"Graz", "Austria", new DateTime(2022, 01, 5)),
    new Client("Patrick Smith",30,"Liverpool", "UK", new DateTime(2022, 09, 15)),
    new Client("John Mayers",30,"Liverpool", "UK", new DateTime(2021, 07, 12))
  };

  private void EnglishTranslation(){
    locale = "en";
  }

  private void ItalianTranslation(){
      locale= "it";
  }
}
Basic grid

Localize Text Content

All messages, tooltips and text content the user can recieve are defined in the messages property.
By deafult, Messages contains only an "en" key, which specifies the english translation of the text content. 

Dictionary<string, object> messages = new Dictionary<string, object>()
  {
      {
          "en",
          new Dictionary<string, object>()
          {
              {"invalidColumnProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\""},
              {"invalidRowProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\""},
              {"invalidCellValue", "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\""},
              {"frozenColumns", "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen."},
              {"frozenRows", "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen."},
              .....
          }
        }
  };
The following Dictionary represnts the full list of possible messages and their default English values:: 
IDictionary messages = new Dictionary<string, object>()
  {
      {
          "en",
          new Dictionary<string, object>()
          {
              {"invalidColumnProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\""},
              {"invalidRowProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\""},
              {"invalidCellValue", "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\""},
              {"frozenColumns", "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen."},
              {"frozenRows", "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen."},
              {"columnGroups", "{{elementType}}: Please, check the initialization of the smartGrid's columns array. The columns in a column group are expected to be siblings in the columns array."},
              {"min", "Min: {{value}}"},
              {"max", "Max: {{value}} "},
              {"sum", "Sum: {{value}} "},
              {"avg", "Avg: {{value}} "},
              {"count", "Count: {{value}} "},
              {"pagerFirstButton", "First"},
              {"pagerLastButton", "Last"},
              {"pagerPreviousButton", "Previous"},
              {"pagerNextButton", "Next"},
              {"pagerNavigateToLabel", "Go to:"},
              {"pagerPageSizeLabel", "Show:"},
              {"pagerNavigateToInputPlaceholder", ""},
              {"pagerEllipsis", "..."},
              {"pagerSummaryString", "of"},
              {"pagerSummaryPrefix", "of"},
              {"pagerSummarySuffix", ""},
              {"columnMenuCustomizeType", "Customize type"},
              {"columnMenuItemRename", "Rename"},
              {"columnMenuItemEditDescription", "Edit description"},
              {"columnMenuItemDuplicate", "Duplicate"},
              {"columnMenuItemInsertLeft", "Insert left"},
              {"columnMenuItemInsertRight", "Insert right"},
              {"columnMenuItemSortAsc", "Sort {{mode}}"},
              {"columnMenuItemSortDesc", "Sort {{mode}}"},
              {"columnMenuItemRemoveSort", "Remove Sort"},
              {"columnMenuItemFilter", "Filter"},
              {"columnMenuItemRemoveFilter", "Remove Filter"},
              {"columnMenuItemGroupBy", "Group by this column"},
              {"columnMenuItemRemoveGroupBy", "Remove Group"},
              {"columnMenuItemHide", "Hide"},
              {"columnMenuItemDelete", "Delete"},
              {"columnResizeTooltip", "width: {{value}}px"},
              {"rowResizeTooltip", "height: {{value}}px"},
              {"commandBarAddRow", "Add"},
              {"commandBarDeleteRow", "Delete"},
              {"commandBarBatchRevert", "Revert"},
              {"commandBarBatchSave", "Save"},
              {"commandBarFilter", "Filter"},
              {"commandBarSort", "Sort"},
              {"commandBarSearch", "Search"},
              {"commandBarCustomize", "Customize"},
              {"commandBarGroup", "Group"},
              {"commandColumnEdit", "Edit"},
              {"commandColumnDelete", "Delete"},
              {"commandColumnCancel", "Cancel"},
              {"commandColumnUpdate", "Update"},
              {"commandColumnMenu", ""},
              {"expandRow", "Expand row"},
              {"collapseRow", "Collapse row"},
              {"addNewRow", "Click here to add a new row"},
              {"addNewColumn", "Click here to add a new column"},
              {"dialogChartHeader", "{{value}} Chart"},
              {"dialogRowDetailHeader", "Row Id: {{value}}"},
              {"dialogDescriptionHeader", "Column: {{value}}"},
              {"dialogRowDetailButtonConfirm", "OK"},
              {"dialogRowDetailButtonCancel", "CANCEL"},
              {"dialogEditHeader", "Edit {{value}}"},
              {"dialogAddButtonConfirm", "ADD"},
              {"dialogAddButtonCancel", "CANCEL"},
              {"dialogEditButtonConfirm", "OK"},
              {"dialogEditButtonCancel", "CANCEL"},
              {"dialogFilterButtonConfirm", "FILTER"},
              {"dialogFilterButtonCancel", "CLEAR"},
              {"dialogDeleteButtonConfirm", "DELETE"},
              {"dialogDeleteButtonCancel", "CANCEL"},
              {"dialogEditColumn", "Column: {{value}}"},
              {"dialogAddColumn", "Add Column"},
              {"dialogAddHeader", "Add Row"},
              {"dialogDeleteHeader", "Delete Row"},
              {"dialogFilterHeader", "Filter by"},
              {"dialogFilterMinLabel", "Min"},
              {"dialogFilterMaxLabel", "Max"},
              {"conditionalFormatting", "Conditional Formatting"},
              {"groupBarLabel", "Drag a column header here to group by that column"},
              {"dialogDeleteContent", "Are you sure you want to delete this row?"},
              {"calendar", new Dictionary<string, object>(){
                {"/", "/"},
                {":", ":"},
                {"firstDay", 0},
                {"days", new Dictionary<string, object>() {
                  {"names", new string[]{
                    "Sunday",
                    "Monday",
                    "Tuesday",
                    "Wednesday",
                    "Thursday",
                    "Friday",
                    "Saturday"
                  }},
                  {"namesAbbr", new string[]{
                    "Sun",
                    "Mon",
                    "Tue",
                    "Wed",
                    "Thu",
                    "Fri",
                    "Sat"
                  }},
                  {"namesShort", new string[]{
                    "Su",
                    "Mo",
                    "Tu",
                    "We",
                    "Th",
                    "Fr",
                    "Sa"
                  }}
                }},
                {"months", new Dictionary<string, object>() {
                  {"names", new string[]{
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December",
                    ""
                  }},
                  {"namesAbbr", new string[]{
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "Jun",
                    "Jul",
                    "Aug",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dec",
                    ""
                  }}
                }},
                {"AM", new string[]{
                  "AM",
                  "am",
                  "AM"
                }},
                {"PM", new string[]{
                  "PM",
                  "pm",
                  "PM"
                }},
                {"eras", new Dictionary<string, object>()
                  {
                    {"name", "A.D."},
                    {"start", null},
                    {"offset", 0}
                  }
                },
                {"currencySymbol", "$"},
                {"currency", "USD"},
                {"currencySymbolPosition", "before"},
                {"decimalSeparator", "."},
                {"thousandsSeparator", ","},
              }},
              {"CONTAINS", "Contains"},
              {"DOES_NOT_CONTAIN", "Does not contain"},
              {"ENDS_WITH", "Ends with"},
              {"EQUAL", "Equal"},
              {"GREATER_THAN", "Greater than"},
              {"GREATER_THAN_OR_EQUAL", "Greater than or equal"},
              {"LESS_THAN", "Less than"},
              {"LESS_THAN_OR_EQUAL", "Less than or equal"},
              {"NOT_EQUAL", "Not equal"},
              {"RANGE", "Range"},
              {"CLEAR_FILTER", "Clear Filter"},
              {"STARTS_WITH", "Starts with"},
              {"addFilter", "+ Add filter"},
              {"and", "And"},
              {"apply", "Apply"},
              {"booleanFirst", "☐"},
              {"booleanLast", "☑"},
              {"cancel", "Cancel"},
              {"CONTAINS_CASE_SENSITIVE", "Contains (case sensitive)"},
              {"dateFirst", "1"},
              {"dateLast", "9"},
              {"DOES_NOT_CONTAIN_CASE_SENSITIVE", "does not contain (case sensitive)"},
              {"EMPTY", "empty"},
              {"ENDS_WITH_CASE_SENSITIVE", "ends with (case sensitive)"},
              {"EQUAL_CASE_SENSITIVE", "equal (case sensitive)"},
              {"filter", "Filter"},
              {"customize", "Customize Columns"},
              {"filteredByMultiple", "{{n}} filters"},
              {"filteredByOne", "1 filter"},
              {"filterValuePlaceholder", "Value"},
              {"find", "Find a field"},
              {"findInView", "Find in view"},
              {"firstBy", "Sort by"},
              {"found", "{{nth}} of {{n}}"},
              {"from", "from"},
              {"noFilters", "No filters applied"},
              {"noResults", "No results"},
              {"noSorting", "No sorting applied"},
              {"NOT_EMPTY", "not empty"},
              {"NOT_NULL", "not null"},
              {"NULL", "null"},
              {"numberFirst", "1"},
              {"numberLast", "9"},
              {"ok", "OK"},
              {"or", "Or"},
              {"pickAnother", "Pick another field to sort by"},
              {"sort", "Sort"},
              {"group", "Group"},
              {"sortedByMultiple", "Sorted by {{n}} fields"},
              {"sortedByOne", "Sorted by 1 field"},
              {"STARTS_WITH_CASE_SENSITIVE", "starts with (case sensitive)"},
              {"stringFirst", "A"},
              {"stringLast", "Z"},
              {"thenBy", "then by"},
              {"where", "Where"},
              {"collapseAll", "Collapse all"},
              {"expandAll", "Expand all"},
              {"noGrouping", "No grouping"},
              {"groupedByMultiple", "{{n}} groups"},
              {"groupedByOne", "1 group"},
              {"firstByGroup", "Group by"},
              {"pickAnotherGroupBy", "Pick another field to group by"},
              {"add", "Add condition"},
              {"all", "All columns"},
              {"between", "Between"},
              {"close", "Close"},
              {"column", "Column:"},
              {"condition", "Condition:"},
              {"equal", "Equal To"},
              {"fontFamily", "Font family:"},
              {"fontSize", "Font size:"},
              {"format", "Format:"},
              {"greaterThan", "Greater Than"},
              {"highlight", "Highlight"},
              {"lessThan", "Less Than"},
              {"notEqual", "Not Equal To"},
              {"remove", "Remove condition"},
              {"secondValue", "Second value:"},
              {"text", "Text"},
              {"value", "Value:"}
          }
      }
    }
  }

We will know add the Italian translation for all messages:

Dictionary<string, object> messages = new Dictionary<string, object>()
  {
      {
          "en",
          new Dictionary<string, object>()
          {
              {"invalidColumnProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\""},
              {"invalidRowProperty", "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\""},
              {"invalidCellValue", "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\""},
              {"frozenColumns", "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen."},
              {"frozenRows", "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen."},
              .....
          }
      },
      {
        "it",
        new Dictionary<string, object>()
        {
            {"invalidColumnProperty", "{{elementType}}: Nome proprietà non valido \"{{propertyName}}\" impostato per Colonna: \"{{type}}\""},
            {"invalidRowProperty", "{{elementType}}: nome proprietà non valido \"{{propertyName}}\" impostato per Row\""},
            {"invalidCellValue", "Valore cella non valido \"{{value}}\", Regola di convalida: \"{{validationRule}}\""},
            {"frozenColumns","{{elementType}}: per bloccare/bloccare un gruppo di colonne, tutte le colonne al suo interno devono essere bloccate."},
            {"frozenRows", "{{elementType}}: per bloccare/bloccare una cella speciale, tutte le righe al suo interno devono essere bloccate."},
            {"columnGroups", "{{elementType}}: per favore, controlla l'inizializzazione dell'array di colonne di smartGrid. Le colonne in un gruppo di colonne dovrebbero essere fratelli nell'array di colonne."},
            {"min", "Min: {{value}}"},
            {"max", "Massimo: {{value}} "},
            {"sum", "Somma: {{value}} "},
            {"avg", "Media: {{value}} "},
            {"count", "Conteggio: {{value}} "},
            {"pagerFirstButton", "Primo"},
            {"pagerLastButton", "Ultimo"},
            {"pagerPreviousButton", "Precedente"},
            {"pagerNextButton", "Avanti"},
            {"pagerNavigateToLabel", "Vai a:"},
            {"pagerPageSizeLabel", "Mostra:"},
            {"pagerNavigateToInputPlaceholder", ""},
            {"pagerEllipsis", "..."},
            {"pagerSummaryString", "di"},
            {"pagerSummaryPrefix", "di"},
            {"pagerSummarySuffix", ""},
            {"columnMenuCustomizeType", "Personalizza tipo"},
            {"columnMenuItemRename", "Rinomina"},
            {"columnMenuItemEditDescription", "Rinomina"},
            {"columnMenuItemDuplicate", "Duplica"},
            {"columnMenuItemInsertLeft", "Inserisci a sinistra"},
            {"columnMenuItemInsertRight", "Inserisci a destra"},
            {"columnMenuItemSortAsc", "Ordina  {{mode}}"},
            {"columnMenuItemSortDesc", "Ordina  {{mode}}"},
            {"columnMenuItemRemoveSort", "Rimuovi ordinamento"},
            {"columnMenuItemFilter", "Filtro"},
            {"columnMenuItemRemoveFilter", "Rimuovi filtro"},
            {"columnMenuItemGroupBy", "Raggruppa per questa colonna"},
            {"columnMenuItemRemoveGroupBy", "Rimuovi gruppo"},
            {"columnMenuItemHide", "Nascondi"},
            {"columnMenuItemDelete", "Elimina"},
            {"columnResizeTooltip", "larghezza: {{value}}px"},
            {"rowResizeTooltip", "altezza: {{value}}px"},
            {"commandBarAddRow", "Aggiungi"},
            {"commandBarDeleteRow", "Elimina"},
            {"commandBarBatchRevert", "Ripristina"},
            {"commandBarBatchSave", "Salva"},
            {"commandBarFilter", "Salva"},
            {"commandBarSort", "Ordina"},
            {"commandBarSearch", "Cerca"},
            {"commandBarCustomize", "Personalizza"},
            {"commandBarGroup", "Gruppo"},
            {"commandColumnEdit", "Modifica"},
            {"commandColumnDelete", "Elimina"},
            {"commandColumnCancel", "Annulla"},
            {"commandColumnUpdate", "Aggiorna"},
            {"commandColumnMenu", ""},
            {"expandRow", "Espandi riga"},
            {"collapseRow", "Comprimi riga"},
            {"addNewRow", "Fai clic qui per aggiungere una nuova riga"},
            {"addNewColumn", "Fai clic qui per aggiungere una nuova colonna"},
            {"dialogChartHeader", "{{value}} Grafico"},
            {"dialogRowDetailHeader", "Riga Id: {{value}}"},
            {"dialogDescriptionHeader", "Colonna: {{value}}"},
            {"dialogRowDetailButtonConfirm", "OK"},
            {"dialogRowDetailButtonCancel", "ANNULLA"},
            {"dialogEditHeader", "Modifica  {{value}}"},
            {"dialogAddButtonConfirm", "AGGIUNGI"},
            {"dialogAddButtonCancel", "ANNULLA"},
            {"dialogEditButtonConfirm", "OK"},
            {"dialogEditButtonCancel", "ANNULLA"},
            {"dialogFilterButtonConfirm", "FILTRO"},
            {"dialogFilterButtonCancel", "CLEAR"},
            {"dialogDeleteButtonConfirm", "DELETE"},
            {"dialogDeleteButtonCancel", "ANNULLA"},
            {"dialogEditColumn", "Colonna: {{value}}"},
            {"dialogAddColumn", "Aggiungi colonna"},
            {"dialogAddHeader", "Aggiungi riga"},
            {"dialogDeleteHeader", "Elimina riga"},
            {"dialogFilterHeader", "Filtra per"},
            {"dialogFilterMinLabel", "Min"},
            {"dialogFilterMaxLabel", "Massimo"},
            {"conditionalFormatting", "Formattazione condizionale"},
            {"groupBarLabel", "Trascina qui l'intestazione di una colonna per raggrupparla in base a quella colonna"},
            {"dialogDeleteContent", "Sei sicuro di voler eliminare questa riga?"},
            {"calendar", new Dictionary<string, object>(){
              {"currencySymbol", "€"},
              {"currency", "EUR"},
              {"currencySymbolPosition", "after"},
              {"decimalSeparator", "."},
              {"thousandsSeparator", ","},
              }
            },
            {"CONTAINS", "Contiene"},
            {"DOES_NOT_CONTAIN", "Non contiene"},
            {"ENDS_WITH", "Finisce con"},
            {"EQUAL", "Uguale"},
            {"GREATER_THAN", "Maggiore di"},
            {"GREATER_THAN_OR_EQUAL", "Maggiore o uguale di"},
            {"LESS_THAN", "Meno di"},
            {"LESS_THAN_OR_EQUAL", "Inferiore o uguale"},
            {"NOT_EQUAL", "Non uguale"},
            {"RANGE", "Gamma"},
            {"CLEAR_FILTER", "Cancella filtro"},
            {"STARTS_WITH", "Inizia con"},
            {"addFilter", "+ Aggiungi filtro"},
            {"and", "e"},
            {"apply", "Applica"},
            {"booleanFirst", "☐"},
            {"booleanLast", "☑"},
            {"cancel", "Annulla"},
            {"CONTAINS_CASE_SENSITIVE", "Contiene   (case sensitive)"},
            {"dateFirst", "1"},
            {"dateLast", "9"},
            {"DOES_NOT_CONTAIN_CASE_SENSITIVE", "non contiene(case sensitive)"},
            {"EMPTY", "vuoto"},
            {"ENDS_WITH_CASE_SENSITIVE", "termina con (case sensitive)"},
            {"EQUAL_CASE_SENSITIVE", "uguale  (case sensitive)"},
            {"filter", "Filtro"},
            {"customize", "Personalizza colonne"},
            {"filteredByMultiple", "{{n}} filtri"},
            {"filteredByOne", "1 filtro"},
            {"filterValuePlaceholder", "Valore"},
            {"find", "Trova"},
            {"findInView", "Trova"},
            {"firstBy", "Ordina per"},
            {"found", "{{nth}} di  {{n}}"},
            {"from", "da"},
            {"noFilters", "Nessun filtro applicato"},
            {"noResults", "Nessun risultato"},
            {"noSorting", "Nessun ordinamento applicato"},
            {"NOT_EMPTY", "non vuoto"},
            {"NOT_NULL", "non nullo"},
            {"NULL", "nullo"},
            {"numberFirst", "1"},
            {"numberLast", "9"},
            {"ok", "OK"},
            {"or", "O"},
            {"pickAnother", "Scegli un altra colonna per ordinare"},
            {"sort", "Ordina"},
            {"group", "Gruppo"},
            {"sortedByMultiple", "Ordinato per {{n}} campi"},
            {"sortedByOne", "Ordinato per 1 campo"},
            {"STARTS_WITH_CASE_SENSITIVE", "inizia con (case sensitive)"},
            {"stringFirst", "A"},
            {"stringLast", "Z"},
            {"thenBy", "dopo di"},
            {"where", "Dove"},
            {"collapseAll", "Comprimi tutto"},
            {"expandAll", "Espandi tutto"},
            {"noGrouping", "Nessun raggruppamento"},
            {"groupedByMultiple", "{{n}} gruppi"},
            {"groupedByOne", "1 gruppo"},
            {"firstByGroup", "Raggruppa per"},
            {"pickAnotherGroupBy", "Scegli un altro campo per raggruppare"},
            {"add", "Aggiungi condizione"},
            {"all", "Tutte le colonne"},
            {"between", "Tra"},
            {"close", "Chiudi"},
            {"column", "Colonna:"},
            {"condition", "Condizione:"},
            {"equal", "Uguale a"},
            {"fontFamily", "Famiglia di caratteri:"},
            {"fontSize", "Dimensione carattere:"},
            {"format", "Formato:"},
            {"greaterThan", "Maggiore di"},
            {"highlight", "Evidenziare"},
            {"lessThan", "Minore di"},
            {"notEqual", "Non uguale a"},
            {"remove", "Rimuovi condizione"},
            {"secondValue", "Secondo valore:"},
            {"text", "Testo"},
            {"value", "Valore:"}
        }
      }
  };

When the messages have been set, the langauge/culture of the Grid is set using the locale property.
The EnglishTranslation and ItalianTranslation functions will change the locale property, which is binded to the Grid: 

private void EnglishTranslation(){
  locale = "en";
}

private void ItalianTranslation(){
  locale= "it";
}

Now, when the radio button is set to Italian, the text content of the Grid will also be set to Italian:

Grid translated

Date & Currency Localization

The format of each grid column is set using the FormatSettings property. The value can be localized using the Intl.NumberFormat or Intl.DateTimeFormat objects
Expand the translation functions so that the Account Balance and Last Order column are localized, according to the language: 

private void EnglishTranslation(){
  locale = "en";
  balanceColumn.FormatSettings = new Dictionary<string, object>()
  {
    {
      "Intl",
      new Dictionary<string, object>()
      {
        {
          "NumberFormat",
          new Dictionary<string, object>()
          {
            { "style", "currency" },
            { "currency", "USD" }
          }
        }
      }
    }
  };
  lastOrderColumn.FormatSettings = new Dictionary<string, object>()
  {
    {
      "Intl",
      new Dictionary<string, object>()
      {
        {
          "DateTimeFormat",
          new Dictionary<string, object>()
          {
              { "dateStyle", "full" }
          }
        }
      }
    }
  };
  
}

private void ItalianTranslation(){
  locale= "it";
  balanceColumn.FormatSettings = new Dictionary<string, object>()
    {
      {
        "Intl",
        new Dictionary<string, object>()
        {
          {
            "NumberFormat",
            new Dictionary<string, object>()
            {
              { "style", "currency" },
              { "currency", "EUR" }
            }
          }
        }
      }
    };
  lastOrderColumn.FormatSettings = new Dictionary<string, object>()
  {
    {
      "Intl",
      new Dictionary<string, object>()
      {
        {
          "DateTimeFormat",
          new Dictionary<string, object>()
          {
              { "dateStyle", "full" }
          }
        }
      }
    }
  }; 
}
Localized formatting

Translating Column Labels

Column labels can be translated by first creating an object, which contains the label text, translated in the different languages:

IDictionary<string, IDictionary<string, string>> columnLabels = new Dictionary<string, IDictionary<string, string>>()
  {
      {
          "en",
          new Dictionary<string, string>()
          {
              { "Name", "Client Name" },
              { "Balance", "Account Balance" },
              { "City", "City" },
              { "Country", "Country" },
              { "LastOrder", "Last Order" },
          }
      },
      {
          "it",
          new Dictionary<string, string>()
          {
              { "Name", "Nome del cliente" },
              { "Balance", "Saldo del conto" },
              { "City", "Città" },
              { "Country", "Paese" },
              { "LastOrder", "Ultimo Ordine" },
          }
      }
  };

Then, set the labels to the GridCoumns and call the grid.StateHasChanged() method:

<Grid @ref="grid" DataSource="@Clients" Header="@header" Filtering="@filtering" Sorting="@sorting"
Grouping="@grouping" Messages="@messages" Locale="@locale">
    <Columns>
        <Column DataField="Name" Label='@columnLabels[@locale]["Name"]'></Column>
        <Column @ref="balanceColumn" DataField="Balance" Label='@columnLabels[@locale]["Balance"]' DataType="number"  CellsFormat="c2"></Column>
        <Column DataField="City" Label='@columnLabels[@locale]["City"]'></Column>
        <Column DataField="Country" Label='@columnLabels[@locale]["Country"]'></Column>
        <Column @ref="lastOrderColumn" DataField="LastOrder" Label='@columnLabels[@locale]["LastOrder"]' DataType="date" CellsFormat="d"></Column>
    </Columns>
</Grid>
......
@code{
  private void EnglishTranslation(){
    locale = "en";
    balanceColumn.FormatSettings = new Dictionary<string, object>()
    {
      {
        "Intl",
        new Dictionary<string, object>()
        {
          {
            "NumberFormat",
            new Dictionary<string, object>()
            {
              { "style", "currency" },
              { "currency", "USD" }
            }
          }
        }
      }
    };
    lastOrderColumn.FormatSettings = new Dictionary<string, object>()
    {
      {
        "Intl",
        new Dictionary<string, object>()
        {
          {
            "DateTimeFormat",
            new Dictionary<string, object>()
            {
                { "dateStyle", "full" }
            }
          }
        }
      }
    };
    grid.StateHasChanged();
  }

  private void ItalianTranslation(){
      locale= "it";
      balanceColumn.FormatSettings = new Dictionary<string, object>()
        {
          {
            "Intl",
            new Dictionary<string, object>()
            {
              {
                "NumberFormat",
                new Dictionary<string, object>()
                {
                  { "style", "currency" },
                  { "currency", "EUR" }
                }
              }
            }
          }
        };
      lastOrderColumn.FormatSettings = new Dictionary<string, object>()
      {
        {
          "Intl",
          new Dictionary<string, object>()
          {
            {
              "DateTimeFormat",
              new Dictionary<string, object>()
              {
                  { "dateStyle", "full" }
              }
            }
          }
        }
      };
      grid.StateHasChanged();
  }
}
Translated columns