Question

在kendogrid.columnMenu: true像这样http://jsbin.com/AsEtoDik/2

的kendogrid中

有一种非常烦人的行为：当您尝试设置过滤器并且鼠标离开过滤器面板时，它会关闭。它发生了很多，特别是在日期列上过滤。

我想这是有意的，但它不是非常用户友好。我想在mouseleave事件之后设置一个计时器，延迟菜单的关闭，在jQuery但它看起来相当困难，我很感激一些帮助或建议

Answer 1

您可以通过替换Kendo菜单_mouseleave方法（在创建第一个实例之前）禁用此行为：

kendo.ui.Menu.fn._mouseleave = function() {};

然后，您必须在菜单外单击以关闭它（demo）。虽然可能会出现并发症，但您可以尝试使用暂停时间。这样的事情可能会奏效 - 虽然没有测试过多（demo）：

var originalMouseLeave = kendo.ui.Menu.fn._mouseleave;
var mouseLeave = function (e) {
    var that = this;
    clearTimeout(this._timeoutHandle);
    this._timeoutHandle = setTimeout(function () {
        originalMouseLeave.call(that, e);
    }, 1000);
}

kendo.ui.Menu.fn._mouseleave = mouseLeave;

var originalMouseEnter = kendo.ui.Menu.fn._mouseenter;
var mouseEnter = function (e) {
    clearTimeout(this._timeoutHandle);
    originalMouseEnter.call(this, e);
}

kendo.ui.Menu.fn._mouseenter = mouseEnter;

注意：还有hoverDelay配置选项，因此您可以为此设置默认选项。

Answer 2

与版本无关的解决方法是简单地关注过滤器菜单中的其他元素，如Telerik论坛here中所述并在演示here中演示。

他们在示例代码中提供了两个解决方案（一个被注释掉），我更喜欢第二个，因为它没有突出显示过滤器的第一个下拉列表。

＆＃13;

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {...},
        height: 550,
        scrollable: true,
        sortable: true,
        columnMenu: true,
        filterable: true,
        pageable: {...},
        
        // *** workaround ***
        columnMenuInit: function(e){
          var menu = e.container.find(".k-menu").data("kendoMenu");
          menu.bind('activate', function(e){
            if(e.item.is('.k-filter-item')){
              // if an element in the submenu is focused first, the issue is not observed
              e.item.find('input').first().focus();
            }
          });
        },
        
        columns: [...]
    });
  });

＆＃13;

关闭mouseleave的kendogrid过滤器菜单

2 个答案: