Inconsistant filter menu locations on RadGrid

[Aaron]

Hey guys. We've recently purchased and started using these aptly named Rad controls and so far everything has been amazing. Especially after coming from the Infragistics controls we had been using.

We've found one peculiar issue however, and it has to do with the Filter context menus on the RadGrid.

In IE(8+ tested) and Opera(11.5) when you tab to the filter button and hit enter, the context menu shows near the button (as would be expected). In Firefox(3+) Chrome and Safari however it pops up in the top left corner of the screen instead. While not a deal breaker it is sort of jarring.

Is this behaviour intentional? Is there a way to work around it?
Any assistance would be appreciated, Thanks.

[Pavlina]

Hi Aaron,

Can you please confirm that the described issue can be observed in our online example?

Regards,
Pavlina
the Telerik team

[Aaron]

Thanks for the reply, however, perhaps I should have been clearer. The example you linked does not display this behaviour, but it's also not the sort of filtering I was referencing to. This online example however does exhibit the noted behaviour. 

->Click a filter box
->tab to the filter button
->Hit Enter
->Observe strangely placed context menu.

[Pavlina]

Hello Aaron,

The contextmenu that is showing when the filter icon is clicked in RadGrid is shown through an onclick event handler attached to the filter icon. You can verify this by examining RadGrid's markup (there is an onclick event handler attached to the input element that represents the filter icon). By default, when you tab to the filter button and press Enter or Space, the browser simulates a click event. This means the onclick event handler will be executed even when you use the keyboard for "clicking" the button. This is standard browser behavior and cannot be prevented.

In this scenario, based on browser implementation, the event object may provide the coordinate values of the mouse cursor's current location, or, alternatively, provide zeroes. IE 7, as you have indicated to be using, provides the current cursor location, even though the cursor is not over the button and the click event is not initiated by actually clicking the button. Other browsers just use 0, as the event that is invoked when using the keyboard is not a real "click" event. In any case, the context menu cannot differentiate between those 2 cases - real and unreal onclick events. This is why you get the context menu showing under wherever the event object reports the cursor location to be.

You can work around this limitation with some javascript. You can use RadGrid's client-side OnFilterMenuShowing event:

<ClientEvents OnFilterMenuShowing="gridFilterMenuShowing" />

In the event handler, we cancel the original menu showing event and "simulate" another event. The point is in providing the correct mouse cursor coordinates. We want to position the context menu right under the filter button, no matter where the mouse cursor is reported to be. To do that, we create a fake event arguments object and specify the current target and the clientX / clientY fields we need. Additionally, we use a custom flag to indicate a custom event is fired and prevent infinitely throwing the OnFilterMenuShowing event.

Here is the gridFilterMenuShowing javascript function:

function gridFilterMenuShowing(sender, args)

{

    //get the DOM event

    var evt = args.get_domEvent();

    if(!evt._isCustomEvent) //if this is the original event - prevent it

    {

        //get the target

        var target = evt.target || evt.srcElement;

        //get the location

        var loc = $telerik.$(target).offset();

        //create a "fake" event arguments object

        var newEvt = $telerik.$.extend({}, {

            target: target,     //specify the current target

            clientX: loc.left,  //and the coordinates we want

            clientY: loc.top + target.offsetHeight,

            _isCustomEvent: true //this is important!

        });



        args.set_cancel(true);



        setTimeout(function()

        {

            //this internal RadGrid function invokes the context menu all over again

            sender._showFilterMenu(args.get_tableView().get_id(), args.get_column().get_uniqueName(), newEvt);

        }, 100);

    }

}

Using the above function, the filter menu now shows right under the filter button, no matter if the button is clicked with the mouse or focused and "enter"-ed. Let me know how this approach works for you.

All the best,
Pavlina
the Telerik team