Filter grid on KeyPress

16 posts, 0 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 02 Jun 2010 Link to this post

    i have read the doc http://www.telerik.com/help/aspnet-ajax/grdsearchonkeypress.html and viewed some other forum posts but didnt find exactly what i was hoping for.

    I have a radgrid with columns of data (no edit or insert, just read). Each column has the default filter with the filter button and filter menu. I want to keep the filter button and the filter menu but want to add a keypress event so that a user types something in the filter box and press enter (keycode 13) will cause the grid to be filtered using 'contains'.

    The problem with the above doc (settting autopostbackonfilter=true) does have the desired keypress results BUT also runs when the filter textbox loses focus (i dont want that) b/c if a user goes to click the filterbutton (ie filter menu) then focus is lost and the grid is filtered but what they wanted to do was hit the filterbutton?

    So question is: how to do filter on pressing the enter key, with NO filtering when the textbox loses focus (ie user wants to click filter button).

    I hope this is clear. Thanks - Jason
  2. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 02 Jun 2010 Link to this post

    so from teh documentation the following steps are needed:

    1. Hook the onkeypress event of the search textbox
    2. Check whether the key code of the pressed key is 13 (or other if you want to perform search from other key)
    3. Find the button in the grid command item template (in our sample the button is wrapped in this template of the control)
    4. cancel/prevent the default bubbling and invoke the click() method of the button
    5. intercept the postback request in the ItemCommand handler of the grid and filter the records in it in par with the pattern typed by the user

    Can I set the onkeypress event of the filter textbox without needing to use a command template?

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 03 Jun 2010 Link to this post

    so step 1 is pretty easy: in ItemCreated() get the textbox and add onkeypress attribute
    textbox1.attributes.add( "onkeypress", "dofilter(this,event)");

    step 2 is easy

    function dofilter(sender, e)
    {
        if (e.keycode == 13)
        {
              // now get a reference to the filter button???? not sure how to do this. The filterbutton name is not controled by me.
        }
    }


    thanks
    jason
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jun 2010 Link to this post

    Hello Jason,

    One suggestion would be using the 'filter' method which triggers filter command for the column with UniqueName (set on the server) passed as a first argument, instead of accessing the button and invoking the filter command.

    client code:
     
    if(e.keyCode == 13)  
          {  
              // invoke filter command  
          }  
     

    Checkout the following documentation to know more on invoking filter command from client side.
    filter

    Regards,
    Princy.
  6. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 03 Jun 2010 Link to this post

    if(e.keyCode == 13)     
          {     
               var masterTable = $find( "<%= RadGrid1.ClientID %>").get_masterTableView();  
               masterTable.filter("OrderID",10254, Telerik.Web.UI.GridFilterFunction.GreaterThan, true);// invoke filter command     
          }   
     


    How can I access the value in the filter textbox to pass as the 2nd parameter to masterTable.filter function?

    thanks
    jason
  7. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 03 Jun 2010 Link to this post

    found it.

    sender.value

    i saw other posting using sender.get_value() but this gave me an error in IE8


    also, it seems that both onkeypress and onkeydown work for me. Just wondered should one be used over the other and why?

    thanks
    jason
  8. Dheeraj
    Dheeraj avatar
    17 posts
    Member since:
    Apr 2010

    Posted 01 Jul 2010 Link to this post

    Hi Jason,
                   I also have similar kind of requirement . Coluld you please tell me how you have achieved that.
    Regards,
    Dheeraj
  9. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 01 Jul 2010 Link to this post

    protected RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if ( e.Item is GridFilteringItem)
        {
               GridFilteringItem fltItem = e.Item as GridFilteringItem;
               TextBox box = fltItem["column_name"].Controls[0] as TextBox;
               box.Attributes.Add("onkeypress", "doFilter(this,event)");
        }
    }


    <script type="text/javascript">
    function doFilter(sender, e) {
         if (e.keyCode == 13 )
         {
               e.cancelBubble = true;
               e.returnValue = false;
               if ( e.stopPropagation ) {
                     e.stopPropagation();
                     e.preventDefault();
                }
                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                masterTable.filter("column_name", sender.value, Telerik.Web.UI.GridFilterFunction.Contains);
         }
    }
    </script>


    That code worked for me.
  10. Teresia
    Teresia avatar
    6 posts
    Member since:
    Jun 2010

    Posted 19 Aug 2010 Link to this post

    Hi

    I want to do exactly the same thing but I have a grid with many columns where I want this feature. How do I get the correct "column_name" ? Do I have to duplicate the code for each column?

    thanks,
    Teresia

  11. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 24 Aug 2010 Link to this post

    Hi Teresia,

    You do not need to implement that separately for each column. What you can do is use a foreach statement in order to attach a client-side event handler to all your columns' filter textboxes:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if ( e.Item is GridFilteringItem)
        {
            GridFilteringItem fltItem = e.Item as GridFilteringItem;
            foreach(GridColumn column in RadGrid1.Columns)
            {
               TextBox box = fltItem[column.UniqueName].Controls[0] as TextBox;
               box.Attributes.Add("onkeydown", "doFilter(this,event)");
            }
        }
    }

    And then in the javascript function you can get the current column UniqueName by taking the column from the array of column objects that is returned by the get_columns() property of the MasterTableView. The index of the current column can be taken from its parent node as shown in the code-snippet below:
    function doFilter(sender, eventArgs) {
                if (eventArgs.keyCode == 13) {
                    eventArgs.cancelBubble = true;
                    eventArgs.returnValue = false;
                    if (eventArgs.stopPropagation) {
                        eventArgs.stopPropagation();
                        eventArgs.preventDefault();
                    }
                    var masterTableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    var index = sender.parentNode.cellIndex; //index of the current column
                    var columns = masterTableView.get_columns();
                    var uniqueName = columns[index].get_uniqueName();
                    masterTableView.filter(uniqueName, sender.value, Telerik.Web.UI.GridFilterFunction.Contains);
                }
            }

    As you can see, I wired the onkeydown event instead of onkeypress since this is actually a better choice in case you need to catch an Enter key press.


    All the best,
    Tsvetina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Teresia
    Teresia avatar
    6 posts
    Member since:
    Jun 2010

    Posted 09 Dec 2010 Link to this post

    Hi again

    Thanks you for all help, but now I have a new problem (of course).

    The user of my application want to be able to trigger the last used filter, instead of always "Contains".
    For example if she enters "T" and then chooses "StartsWith" filter in the drop down list, and after seeing the result adds a letter (f.ex "TE"), she want to trigger "StartsWith" again when she presses Enter.

    How do I check client side which filter that is chosen in the drop down list? Or do you have any other ideas how to solve this?

    Thanks
    /Teresia
  13. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 09 Dec 2010 Link to this post

    Hello Teresia,

    To get the CurrentFilterFunction that is used on a particular column, you can access it from the get_filterExpressions(). Here is the help article that shows its user:

    http://www.telerik.com/help/aspnet-ajax/get-filterexpressions.html

    You'll need to scroll to the bottom of the page, where it shows how to loop throught the filter expressions. While looping through the list you can compare the column unique name with the one you want to filter and then retrieve the current filter function.

    I hope that helps.

  14. Teresia
    Teresia avatar
    6 posts
    Member since:
    Jun 2010

    Posted 10 Dec 2010 Link to this post

    Hi again

    I have tried get_filterFunction() but it returns undefined. I guess it's because my grid is not bound clientside. Any more ideas?

    /Teresia
  15. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 10 Dec 2010 Link to this post

    Hello Teresia,

    Another approach that you could try is to have a hidden field on the page and save in it the last FilterFunction used, so it is available on the client, too. You can access the filter function in ItemCommand server-side event of RadGrid. When the command name is FilterCommandName you can use the code shown in the first code-snippet in this help article to access the needed value.

    Kind regards,
    Tsvetina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  16. Paul
    Paul avatar
    21 posts
    Member since:
    Sep 2011

    Posted 07 Aug 2013 Link to this post

    How would I do this without requiring the enter key?  For example I want to be able to search when they start entering in a value?  If I take out the keyCode == 13 the grid doesn't filter at all.
    Kind of like type-ahead search but the result is shown in the grid.
  17. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 12 Aug 2013 Link to this post

    Hello Paul,

    You can use the following configuration to achieve the requested functionality:
    Copy Code
    <telerik:GridBoundColumn DataField="ShipName" FilterControlAltText="Filter ShipName column"
        HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName"
        ShowFilterIcon="false" CurrentFilterFunction="Contains"                   
          AutoPostBackOnFilter
    ="true" FilterDelay="2000">
    </telerik:GridBoundColumn>

    Hope this helps. In addition, please note that our developers are currently working on an improved version of the feature which is expected to be available on the next major RadControls release.

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017