Kendo ViewModel binding ignores HTML controls marked 'readonly'

[Jeff Benson]

I am working on an update to our product and part of that involves moving from an old version of Telerik controls (v2018.3.911) to a more recent version (currently v2022.1.301). I have discovered a major difference (breaking change) between behavior of the new Kendo pertaining to the ViewModel binding to HTML controls that are marked "readonly".

A part of our application involves JQuery UI widgets. We use Kendo ViewModel binding to handle updating widget properties on the configuration page.

Here is how the ViewModel is set, from a function in our JQuery UI widgets:

this.viewModel = kendo.observable(this.options);
var thisWidget = this;
this.viewModel.bind("change", function (e) {
      var newVal = e.sender[e.field];
      thisWidget._setOption(e.field, newVal);
});
kendo.bind($("#WidgetPropertiesForm"), this.viewModel);

Some widget properties are not directly set by the user but still exposed to the user for informational purposes. The HTML controls, in this case, are marked with the 'readonly' attribute so they can't be directly modified. Here is an example, linked to the 'categoryName' property of the widget:

<input class="scene-prop-value form-control" data-role="textbox" data-bind="value: categoryName" id="categoryName" readonly>

For this particular property, a pop-up modal dialog is used to select the widget's value. When the dialog closes, the following JQuery executes:

$('#categoryName').val(localCategoryName); //update control value from a local variable, 'localCategoryName'
$('#categoryName').trigger('change'); //trigger a property update to the widget bound to the control

In the 2018 version of Kendo (and earlier versions), this would work just fine. But since upgrading, widgets no longer even receive the 'change' event if their HTML controls is marked 'readonly'. I have proven this is related to a Kendo change because after temporarily removing the 'readonly' attribute the 'change' event for that widget property is received. (The same is true if the 'disabled' attribute is used.)

The architecture of our properties HTML page does not make it easy to work around this. We cannot remove all the  'readonly' attributes from the HTML because this would allow users to inadvertently or deliberately alter widget properties they shouldn't.

I have a sense there might be a supported workaround but I cannot figure out how from documentation or examples I have found.

I am looking for suggestions for how I can address this problem. It would be a shame to have to revert back to the 2018 version of Kendo. We are very near a release candidate and just discovered this issue during QA.

Thanks

Jeff
Senior Developer
New Boundary Technologies, Inc.

[Ianko]

Hi Jeff,

In 2018 version there is no TextBox component so that the dara-role would render you Kendo TextBox. 

With latest version, the proper way to change the value of the Kendo TextBox programmatically is to use the instance's value method and use the trigger method for the change event: https://dojo.telerik.com/@iankodj/UJIMiPuX.

However, the preferred way to change value in an MVVM scenario is using the get and set methods of the viewModel: https://dojo.telerik.com/@iankodj/IViJeYeY. 

The readonly attribute does not impact on the value changing behaviour, you just need to use the TextBox API: https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox. 

Regards,
Ianko
Progress Telerik