CODEWITHSUNDEEP
angularjskendo-uikendo-combobox
Paritosh
Paritosh

Reputation: 11568

How to enable/disable Angular Kendo Combobox programatically or even by html markup

I am trying to disable/enable kendo Combobox based on the text enterted in searchString text box. If text is entered, then combobox should be disabled and if no text is there in searchString then only the combobox should be enabled. Here is the DOJO Link

<input type='search' ng-model='searchString' />
<div style="padding-top: 1em;">
    <h4>Remote data</h4>
    <select kendo-combo-box k-enable='!(searchString && searchString.length > 0)'
            k-placeholder="'Select product'"
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-filter="'contains'"
            k-auto-bind="false"
            k-min-length="3"
            k-data-source="productsDataSource"
            style="width: 100%" >
    </select>
</div>

I know the functionality is possible with jQuery,

$('#id').kendoComboBox({ enabled: true });

But how to do this with Angular JS? I can keep $watch() in angular controller for searchString, but the question is how to disable the combobox with Angular JS code?

Upvotes: 0

Views: 3300

Answers (3)

Jek
Jek

Reputation: 461

a new better way is now available by using k-ng-disabled, you won't need to $watch the variable

http://docs.telerik.com/kendo-ui/AngularJS/introduction#state-changes

Upvotes: 0

Harsh Vyas
Harsh Vyas

Reputation: 326

You can use ng-disabled

Example:

<select
    kendo-combo-box="projectCombobox"
    k-data-source="projectDataSource"
    k-data-text-field="'code'"
    k-data-value-field="'projectId'"
    k-value-primitive="true"
    k-ng-model="checklist.projectId"
    k-suggest="true"
    k-filter="'contains'"
    k-change="onProjectChange"
    style="width: 100%" 
    ng-disabled="!DriveTagSelected">
</select>

ng-disabled="!DriveTagSelected"

Here you can define a variable based on your condition.

Upvotes: 1

Paritosh
Paritosh

Reputation: 11568

Got the solution.

Kendo UI creates a new $scope variable when we provide the value for the kendo-combo-box.
As per below, myCombobox

<select kendo-combo-box='myCombobox' 
            k-placeholder="'Select product'"
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-filter="'contains'"
            k-auto-bind="false"
            k-min-length="3"
            k-data-source="productsDataSource">
</select>

We can use the same $scope variable in the controller to disable it.

$scope.myCombobox.enable(false);

I have updated the same DOJO

Upvotes: 0

Related Questions