CODEWITHSUNDEEP
angularkendo-ui-angular2
Hello
Hello

Reputation: 816

Dropdown list disable / enable based on loading completed or not

I want to disable a dropdown list when loading therefore the user can not click an item. After it completed loading then enable it. There is a property disable so I bind it with a boolean value.

The code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
   <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-dropdownlist 
        [data]="listItems"
        disable="loading">
     </kendo-dropdownlist>
   </div>
 })
 export class AppComponent implements OnInit{
    public loading: boolean;
    public listItems: Array<string>;
    ngOnInit() {
    this.loading = true;
    this.listItems = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
    setTimeout(function(){ this.loading = false; }, 5000);
  }
}

But it is not working which means even I changed the boolean value there is no impaction on it.

Please see Stackblize Demo

My question:

How to make it work? If not, any alternative way to add a spinning overlay it?

Upvotes: 0

Views: 878

Answers (2)

Anoop Rajasekhara Warrier
Anoop Rajasekhara Warrier

Reputation: 1050

You can disable it using the below snippet:

[disabled]="loading"

Example:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <div class="example-wrapper">
  <p>T-shirt size:</p>
  <kendo-dropdownlist 
    data]="listItems"
    [disabled]="loading">
  </kendo-dropdownlist>
  </div>
})
export class AppComponent implements OnInit{
 public loading: boolean;
 public listItems: Array<string>;
 ngOnInit() {
 this.loading = true;
 this.listItems = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
 setTimeout(()=>{ this.loading = false; }, 5000);
 }
}

Upvotes: 0

Kurt Hamilton
Kurt Hamilton

Reputation: 13525

You need to bind the disabled property to your model using square bracket notation. And you have misspelled the disabled attribute as disable.

[disabled]="loading"

Also, you have used a function() { } for your callback, which means that this is scoped to the function itself. You need to use an arrow function to update the component property.

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

DEMO: https://stackblitz.com/edit/angular-fqytq7-dwnirt

Upvotes: 1

Related Questions