Search code examples
javascriptkendo-uikendo-dropdown

Store previous kendo dropdownlist option using keyboard

I want to store the previously selected option when navigating with the keyboard. I have achieved this if the user clicks on the drop down but it doesn't store the option if navigated with the keyboard.

Code:

 CreateDropDown: function (id) {
    var me = IndexController;
    $("#Drop" + id + "").kendoDropDownList({
        name: "drop" + id,
        dataTextField: "text",
        dataValueField: "value",
        valueTemplate: '<i class="#:data.icon#">&nbsp;</i></span><span>#:data.text#</span>',
        template: '<i class="#:data.icon#">&nbsp;</i>' +
            '<span class="k-state-default"><p>#: data.text #</p></span>',
        dataSource: me.variable.options,
        index: 0,
        change: me.onChange,
        open: function (e) {
            me.options.previousOption = e.sender.value();
        }
    });
    me.AddShortText(id, "Short Answer");
}

and I can use the value:

AddShortText: function (a, ChoiceText) {
    var me = IndexController;
    if (me.options.previousOption == "2" || me.options.previousOption == "3")
        $("#TypeDiv" + a).children(".toRemove").remove();
    else
        $("#TypeDiv" + a).children(".group").remove();        
    $("#TypeDiv" + a).append('<div class="group" style="width:50%">\
                                <input id="Answer'+ a + '" type="text" class="inputHighlight" disabled >\
                                <span class="bar"></span>\
                                <label class="labelHighlight">'+ ChoiceText.trim() + '</label>\
                            </div>');
},

GIF:

gif

Thank you in advance

Solution

  • Use the select event https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/select

    The select function is triggered both with keys or mouse

    $("#Drop").kendoDropDownList({
      // your code
      select: function(e) {
        me.options.previousOption = e.sender.value();
      }
});