触发KendoUI多选小部件的打开事件

时间:2014-07-01 18:57:25

标签: kendo-asp.net-mvc kendo-ui-mvc

当用户选中此窗口小部件时,我正在尝试使KendoUI多选下拉列表自动打开。我可以通过控制台触发open事件

var widget = $("#MyWidget").data("kendoMultiSelect");
widget.focus();
widget.open();

由于用户选中了KendoUI多选小部件,我想自动执行此操作。

我的设置:使用KendoUI MVC Wrapper进行Multiselect和IE9

我尝试使用我传递给小部件的名称附加焦点监听器,即

$("#MyWidget").on('focus',function(e){
    alert("hi");
});

我无法以这种方式检测焦点事件。任何帮助/指针将不胜感激!

1 个答案:

答案 0 :(得分:2)

当用户选中字段时,我能够触发KendoUI multiselect的open事件! :)我在窗口对象中添加了一个keyup监听器,并能够找出我感兴趣的元素。它不是很有效但它有效,我欢迎它的改进。

$(document).ready(function () {
    $(window).on('keyup', function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9) {
            //get element in focus
            var item_name = e.target.name;
            //get element in focus
            var focused_element = $(document.activeElement);
            //console.log(focused_element);
            var nextSib = focused_element[0].nextElementSibling;
            if (nextSib && nextSib.parentElement && nextSib.parentElement.nextElementSibling) {
                var select_element = nextSib.parentElement.nextElementSibling;
                //item_name will hold the name of the widget i.e. the value of the input field
                //.Name("myWidgetName")
                item_name = select_element.id;
                var obj_select = '#' + item_name;
                //true for multiselect widget
                if (select_element.type == 'select-multiple') {
                    var obj_selector = $(obj_select).data("kendoMultiSelect");
                    if (obj_selector) {
                        obj_selector.focus();
                        obj_selector.open();
                    }                    
                }else if (select_element.type == 'text'){
                    //true for combobox widget
                    var obj_selector = $(obj_select).data("kendoComboBox");
                    if (obj_selector){
                        obj_selector.open();
                    }
                }
            }
        }
    });
});