Kendo UI - How to localize tooltip of spin boxes in NumericTextbox control?

Question

How to localize/change the text of tooltip of spin boxes in Kendo UI NumericTextbox control?

Answer 1

Yeah, I've had the same problem. For some reason the "kendo.messages.xx-XX.js" localization files don't localize the two messages on the spin buttons, but I've found a way to do that:

if (kendo.ui.NumericTextBox) {
    kendo.ui.NumericTextBox.prototype.options =
    $.extend(true, kendo.ui.NumericTextBox.prototype.options,{
      "upArrowText": "Increase value",
      "downArrowText": "Decrease value"
    });
}

Answer 2

To localize the text you have to simply include the corresponding messages script after the kendo include. The script and link are taken from Kendos documentation on localization:

For example:

$("#numeric").kendoNumericTextBox();

<link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="http://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<!-- This is the important line, you may need to change de-DE to your desired locale -->
<script src="http://kendo.cdn.telerik.com/2018.1.221/js/messages/kendo.messages.de-DE.min.js"></script>

<p>Hover over the up or down caret to see the german texts:</p>
<input id="numeric" type="number" title="numeric" value="17" min="0" max="100" step="1" />

You might want to check the available localization files in the kendo-ui-core repository or their docs.

Note that this is how the messages script does it (which is already shown in the other answer):

/* NumericTextBox messages */

if (kendo.ui.NumericTextBox) {
  kendo.ui.NumericTextBox.prototype.options =
  $.extend(true, kendo.ui.NumericTextBox.prototype.options,{
    "upArrowText": "Increase value",
    "downArrowText": "Decrease value"
  });
}

So you should be able to customize these texts yourself if you want.