filter button context menu keyboard support

[Sheng]

My RadGird allows filtering by column.

In IE 11, using keyboard only cannot move focus into filter button’s context menu.

In Chrome, using keyboard can move the focus into context menu, but it seems there's no way to cancel the operation (close the context menu without applying any filter).

Is there any way to enable good keyboard support for filter button's context menu?

[Attila Antal]

Hi Sheng,

When the AutoPostBackOnFilter property of the columns is enabled, it is expected that the Grid will do a PostBack and it will happen as soon as the change event fires for the FilterTextBox. See AutoPostBackOnFilter - Filtering.

One option would be to disable the AutoPostBackOnFilter property, and then the filtering Meny will appear rather than applying the filter based on the current TextBox value and the FilterExpression defined for the column.

Another option would be to access the Filter Controls on the server-side (or even client-side) and detach the "change" event.

For example:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridFilteringItem filteringItem in RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem))
    {
        foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns.Where(x => x.AutoPostBackOnFilter))
        {
            var filterControl = filteringItem[column.UniqueName].Controls[0] as Control;

            if (filterControl == null) return;

            if (filterControl is TextBox)
            {
                // For ASP TextBox remove the onchange attribute
                ((TextBox)filterControl).Attributes["onchange"] = "javascript:void(0)";
            }
            else if (filterControl is RadTextBox)
            {
                // For RadTextBox, clear the OnValueChanged event handler
                ((RadTextBox)filterControl).ClientEvents.OnValueChanged = "function(){}";
            }
            else if (filterControl is RadNumericTextBox)
            {
                // For RadNumericTextBox, clear the OnValueChanged event handler
                ((RadNumericTextBox)filterControl).ClientEvents.OnValueChanged = "function(){}";
            }
            else if (filterControl is RadDateTimePicker)
            {
                // For RadDateTimePicker, clear the OnValueChanged event handler
                ((RadDateTimePicker)filterControl).DateInput.ClientEvents.OnValueChanged = "function(){}";
            }
            else if (filterControl is RadDatePicker)
            {
                // For RadDatePicker, clear the OnValueChanged event handler
                ((RadDatePicker)filterControl).DateInput.ClientEvents.OnValueChanged = "function(){}";
            }
        }
    }
}

 

Kind regards,
Attila Antal
Progress Telerik