Filter grid on KeyPress

[Jason Bourdette]

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

[Jason Bourdette]

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?

[Jason Bourdette]

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

[Princy]

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.

[Jason Bourdette]

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

[Jason Bourdette]

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

[Dheeraj]

Hi Jason,
               I also have similar kind of requirement . Coluld you please tell me how you have achieved that.
Regards,
Dheeraj

[Jason Bourdette]

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.

[Teresia]

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

[Tsvetina]

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

[Teresia]

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

[Cori]

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.

[Teresia]

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

[Tsvetina]

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

[Paul]

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.

[Eyup]

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