[Solved] filterOnEnter() - function receives all keycodes execept 13 'Enter'

[Mark]

Hello,

I'm attempting to use the filterOnEnter functionality.  I can place a breakpoint in the filterOnEnter() function and verify that I am receiving the 'onkeypress' keycodes.  That is all of them except keycode=13 which of course is the 'Enter' key which is the keycode to fire the action.

    Protected Sub rgrdTickler_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgrdTickler.ItemCreated
        If TypeOf e.Item Is GridFilteringItem Then
            Dim filterItem As GridFilteringItem = TryCast(e.Item, GridFilteringItem)
            For Each col As GridColumn In rgrdTickler.MasterTableView.Columns    ' rgrdTickler.MasterTableView.RenderColumns
                ' I have set 'AutoPostBackOnFilter=True' to our filter columns
                If col.AutoPostBackOnFilter = True Then
                    'Get column name
                    Dim colName As String = col.UniqueName
                    'Get reference to filter textbox for column
                    Dim txt As TextBox = TryCast(filterItem(colName).Controls(0), TextBox)
                    If Not txt Is Nothing Then
                        txt.Attributes.Add("onkeypress", String.Format("filterOnEnter(this, event, ""{0}"", ""{1}"");", rgrdTickler.ClientID, colName))
                    End If
                End If
            Next
        End If
    End Sub

I have included my _ItemCreated function.  Is it possible to get C# demo code in VB?

Thanks.....

[Shinu]

Hi Mark,

In the above post you have mentioned that you have set the AutoPostBackOnFilter property to true. If you set this property to True, the user does not need to press the filter button to initiate filtering. Instead, a postback filter operation occurs when the user types a filter in the filter box and presses [Enter] from the keyboard or if the filter textbox loses focus. You also have to  set the CurrentFilterFunction property to a desired value. So that the Grid Filtering will be done on Enter key press.
Search on key press/button click




Thanks
Shinu

[Mark]

I guess I didn't provide enough explanation.  I'll try again.

I'm trying to use the techniques demonstrated in the video filterOnEnter()
Filtering DEMO
http://telerikwatch.com/2008/09/telerik-watch-minute-enhancing-radgrid.html

filterOnEnter() is a client side javascript  function.  I can place a breakpoint in the filterOnEnter() function and verify that I am receiving the 'onkeypress' keycodes.  That is all of them except keycode=13 which of course is the 'Enter' key which is the keycode to fire the action.

This technique is mentioned here: http://www.telerik.com/help/aspnet-ajax/grdbasicfiltering.html

There are also some useful shortcuts (achievable with several lines of javascript code) for applying filters when typing in the column header filter box and pressing the [Enter] key from the keyboard (illustrated in this video). Note that a prerequisite to trigger filter operation on [Enter] key press is to set the AutoPostBackOnFilter property of the corresponding column to true:

• If the user enters [some_value] and hits [Enter] key, the grid will automatically use the Contains filter function
• If the user enters [some_value]* and hits [Enter] key, the grid will automatically use the StartsWith filter function
• If the user enters *[some_value] and hits [Enter] key, the grid will automatically use the EndsWith filter function
• If the user enters =[some_value] and hits [Enter] key, the grid will automatically use the EqualTo filter function
• If the user enters <>[some_value] and hits [Enter] key, the grid will automatically use the NotEqualTo filter function
• If the user enters >[some_value] and hits [Enter] key, the grid will automatically use the GreaterThan filter function
• If the user enters <[some_value] and hits [Enter] key, the grid will automatically use the LessThan filter function
• If the user enters >=[some_value] and hits [Enter] key, the grid will automatically use the GreaterThanOrEqualTo filter function
• If the user enters =<[some_value] and hits [Enter] key, the grid will automatically use the LessThanOrEqualTo filter function
• If the user enters [some_value][ ][some_other_value] and hits [Enter] key, the grid will automatically use the Between filter function

I've set  AutoPostBackOnFilter="true" on the columns I wish to filter as follows:

 

<telerik:GridBoundColumn DataField="PlanName" Display="True" HeaderText="Plan Name"

 

 

ReadOnly="False" UniqueName="PlanName" AutoPostBackOnFilter="true" Visible="True">

 

 

</telerik:GridBoundColumn>

 

The server side code:

 

//Add code to handle the textbox client-side OnKeyPress event

 

 

//(fired whenever a key is pressed). Call JavaScript function

 

 

//"filterOnEnter" on keypress, pass reference to textbox,

 

 

//key press event, RadGrid ClienID, and column name

 

txt.Attributes.Add(

"onkeypress", String.Format("fil

 

appears to be functioning.   For example, when I enter an 'H' it hits my breakpoint in the javascript, when I enter a '*' it hits my breakpoint in the javascript.   I've entered 'H*' (filter all rows beginning with an 'H').  My next keystroke is 'Enter'.  The 'Enter' keystroke is not picked up, that is to say it does not hit the breakpoint in the javascript the two previous keystrokes did.   The 'Enter' keystroke fires the 

 

//Execute filter

 

tableView.filter(col, query, filter);

which is the whole point of this filterOnEnter technique.

I hope I've done a better job of explaining my issue.

Thank you....

[Iana Tsolova]

Hello Mark ,

Try handling the onkeydown client event instead of the onkeypress and let me know if it makes any difference.

Let me know how it goes.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Paul]

Hi I have found this thread and have been having similar troubles. I have tried your suggestion to use onkeydown instead and this did work, however, when I hit enter this would briefly show the filtered results, before causing the page to postback and reload without any filter applied. I solved this by adding

 

e.cancelBubble =

true;

 

e.returnValue =

false;

after

tableView.filter(col, query, filter);

I still have issues though, when performing subsequent filters in any column using the keyboard shortcut syntax,

i receive the error as shown it the attached image.

My code is as follows:

Code-Behind

 

protected void TelrgEmailSuppliers_OnItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridFilteringItem)
            {
                //Get reference to Grid filter row
                var filterItem = e.Item as GridFilteringItem;

                //Since we're auto generating columns, must use RenderColumns collection
                //(the "normal" columns collection is empty)
                foreach (var col in telrgEmailSuppliers.MasterTableView.RenderColumns)
                {
                    //Filter out non-data columns
                    if (col.UniqueName == "ExpandColumn" || col.UniqueName == "RowIndicator" || col.UniqueName == "RowNum" || col.UniqueName == "ClientSelectColumn")
                        continue;

                    //Get column name
                    var colName = col.UniqueName;

                    //Get reference to filter textbox for column
                    var txt = filterItem[colName].Controls[0] as TextBox;

                    if (txt != null)
                    {
                        //Add code to handle the textbox client-side OnKeyPress event
                        //(fired whenever a key is pressed). Call JavaScript function
                        //"filterOnEnter" on keypress, pass reference to textbox,
                        //key press event, RadGrid ClienID, and column name
                        txt.Attributes.Add("onkeydown", String.Format("filterOnEnter(this, event, \"{0}\", \"{1}\");", telrgEmailSuppliers.ClientID, colName));
                    }
                }
            }
        }

Javascript from .aspx

<script type="text/javascript">
    var tableView = null;
    var cancelFilterMenu = false;

    function filterOnEnter(sender, e, gridId, col)
    {
        //Only filter on Enter (check keyCode)
        if (e.keyCode == 13)
        {
            //Disable filter menu from showing [BROWSER BUG FIX]
            cancelFilterMenu = true;

            if (tableView == null)
                tableView = $find(gridId).get_masterTableView();

            //Try to auto set the filter function
            var filter = "Contains"; //Default

            var query = sender.value;
            if (query.endsWith("*") && query.startsWith("*")) {
                filter = "Contains";
                query = query.substr(1, query.length - 2);
            }
            else if (query.startsWith("*")) {
                filter = "EndsWith";
                query = query.substr(1, query.length - 1);
            }
            else if (query.endsWith("*")) {
                filter = "StartsWith";
                query = query.substr(0, query.length - 1);
            }
            else if (query.startsWith("=")) {
                filter = "EqualTo";
                query = query.substr(1, query.length - 1);
            }
            else if (query.startsWith("<>")) {
                filter = "NotEqualTo";
                query = query.substr(2, query.length - 2);
            }
            else if (query.startsWith("<=")) {
                filter = "LessThanOrEqualTo";
                query = query.substr(2, query.length - 2);
            }
            else if (query.startsWith("<")) {
                filter = "LessThan";
                query = query.substr(1, query.length - 1);
            }
            else if (query.startsWith(">=")) {
                filter = "GreaterThanOrEqualTo";
                query = query.substr(2, query.length - 2);
            }
            else if (query.startsWith(">")) {
                filter = "GreaterThan";
                query = query.substr(1, query.length - 1);
            }

            //Execute filter
            sender.value = query;
            tableView.filter(col, query, filter);

            e.cancelBubble = true;
            e.returnValue = false;
        }
    }

    //Need to handle browser inconsistencies that cause
    //filter menu to be displayed on enter key press
    function filterMenuShowing(menu, args)
    {
        if (cancelFilterMenu)
            args.set_cancel(true);

        //Reset trigger value
        cancelFilterMenu = false;
    }

</script>

Code from .aspx

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                                    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
                                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                                        <AjaxSettings>
                                            <telerik:AjaxSetting AjaxControlID="telrgEmailSuppliers">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="telrgEmailSuppliers" />
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                        </AjaxSettings>
                                    </telerik:RadAjaxManager>
                                    <input id="hdnTelgrSuppsSelectedRowIds" type="hidden" runat="server" />
                                    <telerik:RadGrid ID="telrgEmailSuppliers"  runat="server" AllowPaging="true" AllowSorting="true" GroupingSettings-CaseSensitive="false"  AllowFilteringByColumn="true" PageSize="10"
                                            OnNeedDataSource="TelrgEmailSuppliers_OnNeedDataSource" AllowMultiRowSelection="true" AutoGenerateColumns="false" Width="80%" OnItemCreated="TelrgEmailSuppliers_OnItemCreated"
                                            ClientSettings-ClientEvents-OnFilterMenuShowing="filterMenuShowing" >
                                        <MasterTableView ClientDataKeyNames="RowNum">
                                            <Columns>
                                                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderTooltip="Select All" />
                                                <telerik:GridBoundColumn
                                                   DataField="RowNum"
                                                   DataType="System.Int32"
                                                   Visible="false"
                                                   FilterDelay="4000"
                                                   UniqueName="RowNum"  />
                                                <telerik:GridBoundColumn
                                                   DataField="SupplierCode"
                                                   HeaderText="Supplier Code"
                                                   SortExpression="SupplierCode"
                                                   UniqueName="SupplierCode"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" />
                                                <telerik:GridBoundColumn
                                                   DataField="Name"
                                                   HeaderText="Name"
                                                   SortExpression="Name"
                                                   UniqueName="Name"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" />
                                                <telerik:GridBoundColumn
                                                   DataField="EmailAddress"
                                                   HeaderText="Email Address"
                                                   SortExpression="EmailAddress"
                                                   UniqueName="EmailAddress"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" />
                                                <telerik:GridBoundColumn
                                                   DataField="NotifyEmailAddress"
                                                   HeaderText="Notify Email Address"
                                                   SortExpression="NotifyEmailAddress"
                                                   UniqueName="NotifyEmailAddress"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" />
                                                <telerik:GridBoundColumn
                                                   DataField="Comments"
                                                   HeaderText="Comments"
                                                   SortExpression="Comments"
                                                   UniqueName="Comments"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" />
                                                <telerik:GridBoundColumn
                                                   DataField="NoOfProducts"
                                                   DataType="System.Int32"
                                                   HeaderText="No of Products"
                                                   SortExpression="NoOfProducts"
                                                   UniqueName="NoOfProducts"
                                                   AutoPostBackOnFilter="true"
                                                   CurrentFilterFunction="Contains" >
                                                 </telerik:GridBoundColumn>
                                            </Columns>
                                            <PagerStyle Mode=NextPrevAndNumeric AlwaysVisible="true" />
                                        </MasterTableView>
                                        <FilterMenu OnClientShowing="filterMenuShowing"/>
                                        <ClientSettings>
                                            <Selecting AllowRowSelect="true" />
                                            <ClientEvents OnRowCreated="TelrgEmailSuppliers_RowCreated" OnRowSelected="TelrgEmailSuppliers_RowSelected"
                                               OnRowDeselected="TelrgEmailSuppliers_RowDeselected" OnGridCreated="TelrgEmailSuppliers_GridCreated" />
                                       </ClientSettings>
                                    </telerik:RadGrid>

If you help me solve this it would be much appreciated.

[Iana Tsolova]

Hello Paul,

Could you please elaborate a bit on what do you mean by "subsequent filters"? Are you trying to filter a column before the previous filter action has finished, for instance, or you are filtering using the [Enter] key after the grid displayed the previous filtering results?

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul]

Hi Lana, thankyou for your reply, I had actually opened a new thread for this issue, http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=277132 where I was able to obtain a solution. Thanks again and sorry about the double post.

Kind Regards
Paul

[Iana Tsolova]

Hi Paul,

I am happy to hear you have found a resolution for this issue and thank you for sharing your findings with the community.

Do not hesitate to write us back if any issues arise.

Regards,
Iana
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.