Kendo UI - change message options globally

Question

I am using Kendo UI Grid and other Kendo tools for my project.

How can I change some of its settings globally without using any specific id or class?

Eg: Whenever I use grid, pageable message should be "My custom message" across all the site.

I can do that by targeting perticular grid component like below. I am using kendoGrid many places or many times in same page itself. In that case, how can I do the same without repeating the pageable message everytime?

Online Demo { jsFiddle }

$(document).ready(function () {
  $("#grid1").kendoGrid({
    pageable: {
      messages: {
        itemsPerPage: "My custom message"
      },
    },
  });
});

$(document).ready(function () {
  $("#grid2").kendoGrid({
    pageable: {
      messages: {
        itemsPerPage: "My custom message"
      },
    },
  });
});    
.............

If I have 5 grid items in same page, let say #grid1, #grid2, #grid3, #grid4, #grid5, should I need to add below message to all 5 grid components?

   pageable: {
      messages: {
        itemsPerPage: "My custom message"
      },
    },

Instead, is there a way where I can override the global properties for KendoGrid element without touching the original plugin?

Oggy Oggy · Accepted Answer · 2017-04-26T10:11:54

You don't need to add the configuration to each grid. Instead you can take advantage of Kendo's localization features. To change the pager text for all of your grids you should include a "messages" file after you have loaded "kendo.all.min.js". Since this has to do with localization, the "messages" files are culture-specific. If you have not defined a culture for you project Kendo will assume en-US by default.

Here's what you need to do:

Find the original kendo.messages.en-US.min.js file for your version of Kendo. You should be able to find this file in the Kendo installation directory, for example: C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js\messages
Copy the file to your project
Look for itemsPerPage inside the file and change its value to whatever you want.
Add a reference to the file in your html's <head> section, but make sure it is after kendo.all.min.js

For more information on localizing Kendo take a look at this article: http://docs.telerik.com/kendo-ui/framework/localization/overview

You can also see a working example here: http://demos.telerik.com/kendo-ui/grid/localization

Kendo UI - change message options globally

1 Answers