CODEWITHSUNDEEP
kendo-ui-angular2
Rui Lopes
Rui Lopes

Reputation: 106

How to show a Kendo UI for Angular combobox open and use an *ngIf directive in it

ComboBoxComponent provides the method toggle that toggles the visibility of the comboBox popup. I want to display comboBox already opened. I have the following implementation:

datalist.component.html

<kendo-combobox #attributecombobox></kendo-combobox>

datalist.component.cs

@Component({    
    templateUrl: './datalist.component.html'
})
export class DatalistComponent implements OnInit {
   @ViewChild('attributecombobox') public attributeCombobox: ComboBoxComponent;
}

I've tried setting the constructor:

constructor() {
   this.attributeCombobox.toggle(true);
}

Doesn't work. I also tried the OnInit lifecycle hook:

ngOnInit() {
    this.attributeCombobox.toggle(true);
}

It also does not work.

What is the right approach for this? Thanks in advance.

Update 1

Sorry, I didn't disclose all the code. The ComboBox actually has a *ngIf:

datalist.component.html

<kendo-combobox #attributecombobox *ngIf="setAttribute"></kendo-combobox>

datalist.component.cs

    @Component({    
        templateUrl: './datalist.component.html'
    })
    export class DatalistComponent implements OnInit {
       @ViewChild('attributecombobox') public attributeCombobox: ComboBoxComponent;
       setAttribute = true;

       ngOnInit() {
           this.attributeCombobox.toggle(true);
       }
    }

So I think that I found an issue with kendo-combobox elements using *ngIf as you can see in this plunker that I forked from George K plunker (thanks George).

Update 2

I submitted an issue which was classified as a bug here.

Upvotes: 2

Views: 1416

Answers (1)

George K
George K

Reputation: 1763

The earliest possible place to open the component is in the ngOnInit (your second attempt). Calling the toggle method works just fine for me:

ngOnInit() {
  this.combo.toggle();
}

Here is a runnable plunker:

http://plnkr.co/edit/ssbftD6hg3f7LM86CIPD?p=preview

Update

Indeed, the component will not be available in ngOnInit hook if a structure directive like ngIf is applied. Basically, this will desugar to

<ng-template [ngIf]="show">....combobox here... </ng-template>

As you've probably already noticed, the component inside the template will not be there on first init. The solution is to use a hook that will be called later in the component initialization, like AfterViewInit:

ngAfterViewInit() {
   setTimeout(() => {
     this.combo.toggle();
   });
}

The updated plunkr demo can be found here - http://plnkr.co/edit/quLb3oeiVRJfqACqGKEK?p=preview

Upvotes: 2

Related Questions