kendogrid filter menu closing on mouseleave

Question

in a kendogrid with kendogrid.columnMenu: true like this http://jsbin.com/AsEtoDik/2

there's a very annoying behavior: when you try to set a filter and the mouse goes out of the filter panel, it closes. It happens a lot especially filtering on a date column.

I guess this is intended but it's not very user friendly. I thought about setting a timer after the mouseleave event, delaying the closure of the menu, in jQuery but it looks rather difficult and I'd appreciate some help or suggestion

Answer 1

A workaround that isn't as version dependent is to simply focus on another element in the filter menu, as discussed in the Telerik forum here and demonstrated in a demo here.

They provide two solutions in the example code (one is commented out), I prefer the second as it doesn't highlight the filter's first dropdown.

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

Answer 2

You can disable this behavior by replacing the Kendo Menu _mouseleave method (before you create the first instance):

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

Then you'll have to click outside of the menu to close it (demo). You can try your idea with the timeout, although there might be complications; something like this might work - haven't tested much though (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;

Note: there's also the hoverDelay configuration option, so you may be able to set the default option for that.