Is it possible to change Kendo Switch Labels when using it with Kendo Observable Binding? [Kendo-UI]

Question

<input id="switch" data-role="switch" data-bind="enabled: isEnabled, visible: isVisible, checked: isChecked, events: { change: onChange }" />

Switch value: <span id="span"></span>



<script>
  var obs = kendo.observable({
    isChecked: true,
    isEnabled: true,
    isVisible: true,
    onChange: function (e) {
      var value = e.checked ? "ON" : "OFF";
      document.getElementById("span").innerHTML = value;
    }
  });

  kendo.bind($("#switch"), obs);
</script>

Here is how I am binding the value of true or false to display kendo switch.

By default the switch labels are "On" or "Off", I want to change them to "Y" or "N" respectively.

https://dojo.telerik.com/uDiGifEm I have added a working example here in case anyone wants to refer.

I have tried to overwrite using css and also tried using the kendo mobile switch to implement a switch but I have a requirement to use observable binding. I have hardcoded enabled to true here but in real scenario it is bound with a json object boolean value so on change method is used to update if the value is changed.

Answer 1

Add this to your switch declaration:

data-messages="{ checked: 'Y', unchecked: 'N' }"

API reference: https://docs.telerik.com/kendo-ui/api/javascript/ui/switch/configuration/messages

Most of the kendo API documentation examples are in jquery plugin syntax but all work with mvvm declarative syntax as well. Simply prefix the option with "data-" in your html.