angularkendo-uitelerikkendo-ui-angular2kendo-combobox

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?


Solution

  • 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.