CODEWITHSUNDEEP
angularkendo-uitelerikkendo-ui-angular2kendo-combobox
StepUp
StepUp

Reputation: 38094

Select items of kendo-combobox from other controls

I have a kendo-combobox. Keyboard navigation works very well when focus is at kendo-combobox.

ButI would like to select next available item through the buttons which placed near the kendo-combobox. Let me show my code:

HTML: 

<p>Favorite sport:</p>  
<kendo-combobox [data]="listItems" [allowCustom]="true" #superComboBox>
</kendo-combobox>

<button (click)="selectUpperItem()">
    Up
</button>
<button (click)="selectLowerItem()">
    Down
</button>

JavaScript

public listItems: Array<string> = 
[
   "Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", 
   "Tennis", "Volleyball"
];

selectUpperItem(){
   //pseudocode: this.superComboBox.nextUpperItem();    
   //How can I accomplish this?
}

selectLowerItem(){
   //pseudocode: this.superComboBox.nextLowerItem();    
   //How can I accomplish this?
}

Controls looks like this:

enter image description here

So, for example, when I click at the Up button, then the next available item should be selected at the kendo-combobox.

Is it possible to select next available item through the buttons which placed near the kendo-combobox?

Upvotes: 0

Views: 257

Answers (1)

Milo
Milo

Reputation: 3443

If you are trying to select options with the Up/Down buttons you can do something like the following.

Use [(ngModel)] to track current selection: 

<kendo-combobox 
    [data]="listItems" 
    [allowCustom]="allowCustom" 
    [(ngModel)]="currentSelection">
</kendo-combobox>

Then in your .ts check if currentSelection is undefined and manipulate the selection/index accordingly: 

private string: currentSelection;
private number: currentIndex;

private selectUpperItem() {
  if (this.currentSelection == undefined) {
    this.currentSelection = this.listItems[this.listItems.length - 1];
    this.currentIndex = this.listItems.length - 1;
  } else {
    this.currentIndex = this.listItems.indexOf(this.currentSelection);
    this.currentSelection = this.listItems[this.currentIndex - 1];
  }
}

private selectLowerItem() {
  if (this.currentSelection == undefined) {
    this.currentSelection = this.listItems[0];
    this.currentIndex = 0;
  } else {
    this.currentIndex = this.listItems.indexOf(this.currentSelection);
    this.currentSelection = this.listItems[this.currentIndex + 1];
  }
}

It is set so if undefined and click Up will choose last option and when undefined and Down is clicked will choose first option.

Check this plunker.

Upvotes: 1

Related Questions