Enable/disable kendo ui control dynamically

[Delano]

I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.

I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.

Does anybody know If I can do this while creating the control?

<div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search...', value: $parent.test, widget: $parent.searchSource, dataTextField: 'managerName', dataValueField: 'managerId', filter: 'contains', autoBind: false, minLength: 3, enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value change: function(){ if(this.value() && this.selectedIndex == -1){ setTimeout(function () {$parent.selectedManagerId(null);}, 100);}}, dataSource: { serverFiltering: true, transport: { read: $parent.retrieveManager }}}" /></div>

[Petar]

Hi Delano,

This StackBlitz project demonstrates how we can achieve the desired functionality. When the checkbox is checked/unchecked the following code is executed:

checkBoxChanged: function(){
          this.isEnabled = !this.isEnabled;
          var combo = this.$refs.comboBox.kendoWidget();
          combo.enable(this.isEnabled);
      }

With the above, we change the value of the isEnabled variable, take a reference to the ComboBox widget and execute the enable method to enable/disable the component.

Regards,
Petar
Progress Telerik

[Delano]

Solution works.