[Solved] Grid filter menu appearing in edit form

[Jon]

I have a grid with an external form (in a user control). While in the edit form, if I press the Enter key, the drop list for the filter menu is displayed within the Edit form at the location of the mouse pointer within the form. I think that the Enter key is triggering the submit funtionality of the first filter column in the grid (the first filter column in the grid has the filter button highlighted). How can I disable this behavior when the editting?

My hack/workaround for this was to turn off filters and headers (for cosmetic reasons) once I capture the Edit command item like this:

RadGrid1.AllowFilteringByColumn = isVisible
RadGrid1.ShowHeader = isVisible

and then turn them back on once the editing form was closed, but this seems like, well, a hack.

Does anyone know of a more elegant way to disable/prevent this from occurring?

Thanks,

Jon

[Tsvetina]

Hi,

This is because the filter button of the first RadGrid column turns out to be the first button rendered in the form the grid resides in. That is why it is set as the form's default (submit) button. In order to work around this, you can declare an invisible inactive button and set it to be the default one:

<form id="form1" defaultbutton="Button2" runat="server">
<asp:Button ID="Button2" runat="server" Text="" style="display: none;" OnClientClick="return false;" />

Regards,
Tsvetina
the Telerik team

[Jon]

Tsvetina,

Thank you for your reply. The solution you suggest works ok, but then of course I cannot use the filters as I would normally by keying in the filter text and pressing the Enter key to apply the filter to the grid results.

Is there not a way that I can keep the default filter behavior of submiting on Enter, while preventing the filter criteria from being displayed on the edit form when the user presses the Enter key within the form?

I suspect that this can be done via JavaScript, right? Basically, if the focus is not within a filter text box (i.e. the user is entering filter data), then I want the Enter key to submit the form (filter). If the user's focus is anywhere in the edit form (or outside of the filter text boxes), then I want the Enter key to be disabled (or at least to not trigger the display of the filter criteria).

Thanks,

Jon

[Tsvetina]

Hi Jon,

In order to keep the filtering happening on Enter key press, you can use the approach from the sample project which I am attaching. It handles the key press in the filter textbox manually.

Kind regards,
Tsvetina
the Telerik team

[Jon]

Tsvetina,

Thank you for your reply and sample code!

Alas, this did not solve the issue for me. I ported the .cs function to vb (I had to add an additional check because the first column in my grid is a button column with no controls in the control collection):

Private Sub GridItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If e.Item.ItemType = GridItemType.FilteringItem Then
        Dim fltItem As GridFilteringItem = DirectCast(e.Item, GridFilteringItem)
        Dim box As TextBox = Nothing
        For Each column As GridColumn In GridUser.Columns
            If fltItem(column.UniqueName).Controls.Count > 0 Then
                box = TryCast(fltItem(column.UniqueName).Controls(0), TextBox)
                box.Attributes.Add("onkeydown", "doFilter(this,event)")
            End If
        Next
    End If
End Sub

I put a breakpoint ("debugger") statement in the javascript function and it's properly processing/handling key events within the grid. In the case of the external form, however, this function isn't being triggered at all.
 
I'm guessing this is because the the Enter key event gets bubbled up and caught by the grid, since the textboxes (for instance) on the edit form don't have a keypress filter attached to them. This is a bit strange because the edit form is not within the context of the grid.

In case it's helpful, for my page, I have the following pseudo-hierarchy:
Page
    RadGrid
        MasterPageView
            Columns (total of 5)
                EditButton
                Column (including filters) - 4 of these
    Panel
        Edit Form (user control)
            RadTabStrip
            RadMultiPage
                RadPageView1 (User Control)
                RadPageView2 (User Control)
                RadPageView3 (User Control)

When the Edit button in the first column of the grid is clicked, I capture the (Edit) ItemCommand and toggle the panel containing the edit form to make it visible. This form contains standard Insert/Update buttons and when the user clicks the appropriate button, I persist the form values back to the data store, hide the edit form (panel) and rebind the grid to pick up the new (visible) data.

I've attached a picture to illustrate the symptoms of the problem. For the image, I just clicked in the middle of the Edit form (to ensure that no particular field had focus) and then pressed the Enter key. What you can't see in the image is that the first filter button for the first filter column in the grid is highlighted (gold), indicating that the filter menu is associated with the popup menu shown. If I do select a field within the form and press Enter, then the filter pop-up menu does move within the form.

Please let me know if you have any other suggestions on how to address this situation!

Thanks,

Jon

[Tsvetina]

Hello Jon,

In case the edit form is external and in an asp Panel, you can try using the default button work around directly on it, instead of the whole page:

<asp:Panel ID="Panel1" runat="server" DefaultButton="Button2">
   <asp:Button ID="Button2" runat="server" Text="" style="display: none;" OnClientClick="return false;" />

...
</asp:Panel>

This means that you do not need to use the other work around for filtering.

Greetings,
Tsvetina
the Telerik team