CODEWITHSUNDEEP
localizationinternationalizationkendo-grid
santa029
santa029

Reputation: 339

How to localize Kendo grid default text items per page and items

In the footer of kendo grid, it displays "items per page" and "items" How to put them in a resource file for localization. Thanks,

Upvotes: 1

Views: 5731

Answers (3)

Ryan Gavin
Ryan Gavin

Reputation: 729

If you don't want to change the acutal the pager messages it would be a better approach to take advantage of the Kendo culture javascript files.

These files have the localisation messages and you will need to only set this once via the layout page.

Example Below:

@using Microsoft.AspNetCore.Http;
@model Microsoft.AspNetCore.Http.HttpContext

@inject UserManager<User> UserManager
@inject IHttpContextAccessor ContextAccessor

<!-- Load kendo language and culture scripts -->
@{
    var languageDev = UserManager.GetUserAsync(ContextAccessor.HttpContext.User).Result.UserLanguageCode;
    switch (languageDev)
    {
        case "es":
        {
            <script src="~/lib/kendo-ui/js/cultures/kendo.culture.es.min.js" type="text/javascript"></script>
            <script src="~/lib/kendo-ui/js/messages/kendo.messages.es-ES.min.js" type="text/javascript"></script>
            break;
        }
        case "zh":
        {
            <script src="~/lib/kendo-ui/js/cultures/kendo.culture.zh.min.js" type="text/javascript"></script>
            <script src="~/lib/kendo-ui/js/messages/kendo.messages.zh-CN.min.js" type="text/javascript"></script>
            break;
        }
        case "ru":
        {
            <script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru.min.js" type="text/javascript"></script>
            <script src="~/lib/kendo-ui/js/messages/kendo.messages.ru-RU.min.js" type="text/javascript"></script>
            break;
        }
        default:
        {
            <script src="~/lib/kendo-ui/js/cultures/kendo.culture.en.min.js" type="text/javascript"></script>
            <script src="~/lib/kendo-ui/js/messages/kendo.messages.en-GB.min.js" type="text/javascript"></script>
            break;
        }

    }

    <script type="text/javascript">kendo.culture("@languageDev");</script>
}

Check out for a list of cultures available: https://cdnjs.com/libraries/kendo-ui-core

Upvotes: 2

Arjun
Arjun

Reputation: 2227

you can localize or modify text as follows

 pageable: {
  messages: {
    display: "{0} - {1} of {2} items", //{0} is the index of the first record on the page, {1} - index of the last record on the page, {2} is the total amount of records
    empty: "No items to display",
    page: "Page",
    of: "of {0}", //{0} is total amount of pages
    itemsPerPage: "items per page",
    first: "Go to the first page",
    previous: "Go to the previous page",
    next: "Go to the next page",
    last: "Go to the last page",
    refresh: "Refresh"
   }
}

refer http://demos.telerik.com/kendo-ui/grid/localization

Upvotes: 4

santa029
santa029

Reputation: 339

when you are building the grid and setting its properties such as filtering, column names etc. you could overwrite the custom kendo grid messages as:

 gridbuilder.Pageable().Messages(m => {
                     m.Display("{0} - {1} of {2} My customized items");
                     m.Empty("No result found custom msg");
                     })

The contents of Display and Empty, items per page...etc attributes can then be easily moved to a resource file and read from the resource file.

Upvotes: 3

Related Questions