Force a Filter to be applied on Enter Key

4 posts, 1 answers
  1. Steven
    Steven avatar
    29 posts
    Member since:
    Jan 2013

    Posted 09 Feb 2013 Link to this post

    My client is concerned that his users aren't very technical and the Rad Grid column filtering is a bit overwhelming for many of them. He would like for the "Contains" filter to be applied when automatically when they type a phrase into the TextBox and hit "Enter".  Any ideas if and how I can do this?

    Thanks

    Steve
  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 09 Feb 2013 Link to this post

    Hello,

    Please try with below code snippet.

    <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" CurrentFilterFunction="Contains"
        AutoPostBackOnFilter="true" ShowFilterIcon="false">
      </telerik:GridBoundColumn>


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steven
    Steven avatar
    29 posts
    Member since:
    Jan 2013

    Posted 13 Apr 2013 Link to this post

    This worked fine when I was using PostBacks, but I'm revising my code to work with ClientSide web methods. How do I get the grid to fire the ClientSide OnCommand when the user hits the Enter key or clicks the filter button on the client side?  Or are there other event(s) I should be hooking to capture these actions?  Ideally, hitting enter or clicking the filter button should call my script to reload the grid.
  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 17 Apr 2013 Link to this post

    Hi Steven,

    In case you want to filter only on Enter key, you will need to disable the AutoPostBackOnFilter property of the column and attach an OnClick client side event to the corresponding input element of the generated filter control:
    Copy Code
    Copy Code
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridFilteringItem)
        {
            GridFilteringItem filterItem = e.Item as GridFilteringItem;
            TextBox textBox = filterItem["ShipName"].Controls[0] as TextBox;
            textBox.Attributes.Add("onkeypress", "fireFilterCommand('" +
                "ShipName" + "','" + "Contains" + "',this, event)");
        }
    }
    JavaScript:
    Copy Code
    Copy Code
    function fireFilterCommand(uniqueName, filterFunction, inputElement, args) {
        if (args.keyCode == 13) {
            var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            masterTable.filter(uniqueName, inputElement.value, filterFunction);
        }
    }

    I hope this will prove helpful. Please give it a try and let me know about the result.

    Regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top