CODEWITHSUNDEEP
javascriptkendo-uitelerikkendo-combobox
Hobaxo
Hobaxo

Reputation: 31

Enable/disable kendo ui control dynamically

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>

Upvotes: 1

Views: 4656

Answers (1)

Hobaxo
Hobaxo

Reputation: 31

I ended up wrapping the kendo combox definition in a function, so it now looks likes this:

<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />

The kendo combobox is still wrapped and has an id, which I later use to manipulate it in javascript:

<div class="col-xs-3" id="funds">
    <input class="required" data-bind="title: $parent.selectedFund, 
        kendoComboBox: {
            placeholder: 'Start typing to search...',
            value: $parent.selectedManagerId,
        ...
    }" />
</div>

And this is the JavaScript function bound to the onclick checkbox's event:

function SetFundsCombobox() {
    var fundsDiv = document.getElementById('funds');
    var inputSelector = fundsDiv.getElementsByClassName('k-input');
    var span = fundsDiv.getElementsByTagName('span');

    if (document.getElementById('overrideGlobalMappingCheck').checked) {
        document.getElementById('funds').disabled = false;
        inputSelector[0].disabled = false;
        span[1].classList.remove("k-state-disabled");
    } else {
        document.getElementById('funds').disabled = true;
        inputSelector[0].disabled = true;
        span[1].classList.add("k-state-disabled");
    }
};

I'd have rather preferred to perform this via the view model, but it works for now.

EDIT:

I've been able to do this the right way (following the MVVM pattern), so now rather than wrapping the kendo combo box in a function, I added the following function in the view model:

$scope.overrideGlobalMappingChecker = ko.computed(function () {
    if ($scope.entityMapping()) {
        var checkboxChecked = $scope.entityMapping().overrideGlobalMapping();
        $("#funds .k-input").prop('disabled', !checkboxChecked);
        if (!checkboxChecked) {
            $scope.selectedFundId(null);
        }
    }
});

So now, what the html only needs is the definition of the id in the div containing the combo box:

<div class="col-xs-3" id="funds">
    <input data-bind="title: $parent.selectedFundName, kendoComboBox: {
    autoBind: false,
    ...
    }" />
</div>

And that's it, it's a much cleaner/correct way to handle this.

Upvotes: 0

Related Questions