Incrementing/Decrementing the selected index on a Kendo combobox

Question

I have a Kendo UI combobox that is populated with a list of items. I have two buttons, one for Incrementing and one for Decrementing the index on the combobox. The buttons have functions tied to the click event.

The problem is that the combobox's index (shown value not being changed) is not being incremented or decremented. Here's what I have as the methods:

   function IncrementTraveler() {
    var combobox = $("#comboTraveler").data("kendoComboBox");
    var selectedIndex = parseInt(combobox.select());
    alert(selectedIndex);  // displays correct index

    if (selectedIndex < combobox.dataSource.data().length) {
        $('#comboTraveler').select(selectedIndex + 1);  // nothing changes
    }
}

function DecrementTraveler() {
    var combobox = $("#comboTraveler").data("kendoComboBox");
    var selectedIndex = parseInt(combobox.select());
    alert(selectedIndex);  // displays correct index

    if (!(selectedIndex < 0)) {
        $('#comboTraveler').select(selectedIndex - 1);  // nothing changes
    }
}

Thanks for the help!

Answer 1

I believe your issue is that you are calling the .select() method on the jQuery element $('#comboTraveler) instead of your combobox variable, which is the Kendo combo box object. In your if-statements, try this instead:

combobox.select(selectedIndex + 1);

... and then of course selectedIndex - 1 in your DecrementTraveler() method.