Prevent filter menu operator dropdown from closing on scroll

[Rahat Ahmed]

I'm having an issue with the operator dropdown in the filter menu of my grid closing after I scroll to the top or bottom of the option list. I found this example on how to prevent that, but I can't figure out how to access the operator dropdown in the grid menu (I'm using angular directives, if that makes a difference)?

I also noticed that some of the grid examples have this behavior, but don't seem to use the method above. Is there another way to get this behavior?

[Rosen]

Hello Rahat,

 

The idea shown in the how-to article can be applied to the Grid scrollable container, in order to prevent the scroll propagation to the parent scrollable container. This will also prevent the popup instances from closing. A test page which demonstrates this can be found here.

 

Regards,
Rosen
Telerik

 

 

[Rahat Ahmed]

That test page doesn't seem to fix the issue with the operator dropdown closing if you scroll on top of it.

[Rosen]

Hello Rahat,

In order to apply the approach from the dropdownlist how-to to the DropDownList widget in the filter, you should use the filterMenuInit event of the Grid widget. Similar to the following:

filterMenuInit: function(e) {
  e.container.find("[data-role=dropdownlist]").each(function() {
    var widget = $(this).data("kendoDropDownList");

    stopScroll(widget.ul.parent());
  });
}

Regards,
Rosen
Telerik

 

 

[Rahat Ahmed]

Works like a charm! Only had to change filterMenuInit to columnMenuInit because I set columnMenu to true.