меню kendogrid фильтр закрытие на MouseLeave

Question

в kendogrid с kendogrid.columnMenu: true как этим http://jsbin.com/AsEtoDik/2

есть очень раздражает поведение: при попытке установить фильтр и мышь выходит из панели фильтров, она закрывается. Это особенно часто происходит при фильтрации по столбцу даты.

Я предполагаю, что это предназначено, но это не очень удобно. Я думал о настройке таймера после события 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.

Они предоставляют два решения в примере кода (один из них прокомментирован), я предпочитаю второй, так как он не выделяет первый раскрывающийся список фильтра.

$(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: [...] 
 
    }); 
 
    });