Angular 2 how disable kendo-dropdownlist

Question

I'm trying to get a kendo-dropdownlist disabled (named ddlChargeType).

A user should not be able to directly select a value. But it should be possible to select it programmatically (a valid selection of another dropdown, ddlUoM to trigger the selection of a corresponding ddlChargeType option - this works fine).

So, my question is: how to mark my kendo-dropdownlist ddlChargeType as readonly, or disabled, or ng-disabled?

I couldn't find this in the official documentation:

http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

Thanks!

Answer 1

With a constant value use:

<kendo-dropdownlist [data]="listItems" disabled="'true'"></kendo-dropdownlist>

With a component value:

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems" [disabled]="disabled"></kendo-dropdownlist>`
})
class AppComponent {
    public listItems: Array<string> = ["1", "2", "3"];
    public disabled: true;
}

Reference: http://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownListComponent/#toc-delay

Answer 2

If [disabled]="disabled" didn't work you can use [attr.disabled]="disabled?true:null" instead of [disabled]="disabled"

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems" [attr.disabled]="disabled?true:null"></kendo-dropdownlist>`
})
class AppComponent {
    public listItems: Array<string> = ["1", "2", "3"];
    public disabled: true;
}

Answer 3

Try this one [disabled]="true" with Angular 2/3/4/5/6/7

  <kendo-dropdownlist id="ddlSegment" name="ddlSegment" class="arcm-form-control" [data]="filterList?.SegmentList"  [disabled]="true"
    [textField]="'Segment_Desc'" 
      [valueField]="'ARCM_Segment_ID'"  (selectionChange)="segmentSelectionChange($event)" [(ngModel)]="selectedSegment"  >
    </kendo-dropdownlist>