New to Telerik UI for ASP.NET Core? Download free 30-day trial

Telerik UI for ASP.NET Core Globalization Overview

Globalization is the process of designing and developing an application that works in multiple cultures and languages.

It combines localization (the translation of component messages) with internationalization (their adaptation to a specific culture). Cultures require and define particular information for their number formats, week and month names, date and time formats, and so on.

All Kendo UI widgets and their ASP.NET Core server-side wrappers which support date or number formatting depend also on the current culture. Usually, such components are more complex (for example, the Grid, ListView, Charts, and so on).

The following Telerik UI for ASP.NET Core helpers depend on the current culture:

Applying Cultures

To use a culture that is different from the default en-US one in Telerik UI for ASP.NET Core:

  1. Copy the required culture JavaScript file from the \js\culture\ folder of your Telerik UI for ASP.NET Core installation to the wwwroot/lib/kendo-ui/js/cultures/ folder of your application. Alternatively, provide the culture files by using the Kendo CDN service.

  2. Include the corresponding culture JavaScript file after the other JavaScript product files. This example uses the Spanish es-ES culture.

        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
        <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/lib/kendo-ui/js/cultures/kendo.culture.es-ES.min.js"></script>
    
        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.all.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/<version>/js/kendo.aspnetmvc.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/<version>/js/cultures/kendo.culture.es-ES.min.js"></script>
    
  3. Set the current culture by calling the kendo.culture method. You have to add the script block after the culture JavaScript file. As a result, all Telerik UI for ASP.NET Core helpers will use the es-ES culture for parsing and formatting dates and numbers.

    <script>
        kendo.culture("es-ES");
    </script>
    

You can find the complete list of available cultures in the Kendo UI Core repository.

Matching Cultures

The cultures that are set on the client and on the server have to match. This ensures that dates and numbers are displayed and parsed correctly.

Setting the Server-Side Culture

To set the server-side culture, add the following at the beginning of the Configure method in the Startup.cs file of the application.

var supportedCultures = new[] { new CultureInfo("es-ES") };

app.UseRequestLocalization(new RequestLocalizationOptions
{
    DefaultRequestCulture = new RequestCulture("es-ES"),
    SupportedCultures = supportedCultures,
    SupportedUICultures = supportedCultures
});

Setting Matching Client-Side Cultures

To make the helpers use the same culture as the culture set on the server side:

  1. Copy the required culture JavaScript files from the \js\culture\ folder of your Telerik UI for ASP.NET Core installation to the wwwroot/lib/kendo-ui/js/cultures/ folder of your application.
  2. Get the current culture.

        @{
            var culture = System.Globalization.CultureInfo.CurrentCulture.ToString();
        }
    
  3. Include the corresponding culture JavaScript file.

        <script src="@Url.Content("~/lib/kendo/js/cultures/kendo.culture." + culture + ".min.js")"></script>
    
  4. Set the current culture by calling the kendo.culture method. You have to add the script block after the culture JavaScript file.

    Set the client-side culture before initializing any helpers that rely on it.

        <script>
            kendo.culture("@culture");
        </script>
    

See Also

In this article