RichFaces – using built-in filtering

I have shown you how to use RichFaces built-in sorting feature. Let me show you how to use built-in filtering. We are going to use the same 7 Wonders of the World table. To get basic filtering working is simple. Here is how the page looks:



   
      Name
      
   
   
      Location
      
   
   
      Image
      
    


For each column for which we want to enable filtering, we add two attributes, filterBy and filterEvent (lines #4 and #8). filterBy is bound to a bean property on which to do the filtering, while filterEvent sets the event on which to invoke filtering. Once we set the two attributes, running the page will produce an input field in column headers.

For Name column, filtering will be invoked on onkeyup event while on the Location column it’s on onblur event (meaning you have to tab our or click somewhere outside the table). The built in filtering function uses startWith() method to filter. In other words, whatever is entered is checked against each value in the list.

Before filtering:

screenshot017.png

After entering letter ‘C’ in Name column:

screenshot023.png

Redefining the filtering function will be covered in next post.

12 thoughts on “RichFaces – using built-in filtering

  1. Can I define a “requestDelay” property for built-in filtering which mean that the filtering would be done several seconds after the user did some input? Otherwise, the build-in function will call the server side each time you input a character. If the response of the server isn’t quick enough, the user will lose some inputs he did and the page was refreshing again and again.

  2. hi @Max,

    I’m looking for an easy way to shorten the width of filterBy text fields which are also way too long even in your illustrated example.

    Is there a property to accomplish that without messing up with the skin?

  3. Hi Max, this filterBy works well for me with IE and Firefox. Chrome seems to hang when entering a value. i hit the back button, then go back to the page with filterBy and it has filtered on the entered value. mmm. suggestions?

  4. I am using filter, filtering is done well but I have some issues, I have used the event onkeyup. when user enters one key the focus is lost, is there any way so that the user can enter any number of characters and also filter per character. Also, every time the filtering is done, the bean is called, is it normal. I thought filtering is done just by javascript, or is it a ajax request? Finally, Can I get the filtered data at the bean so that I could print just the filtered data. I hope you will guide me, thank you.

  5. @pramod:

    when user enters one key the focus is lost, is there any way so that the user can enter any number of characters and also filter per character

    You can use a different event, such as onblur — the user has to leave the field before the request is sent.

    every time the filtering is done, the bean is called, is it normal

    It’s correct if you use onkeyup event.

    I thought filtering is done just by javascript, or is it a ajax request?

    It’s an Ajax request to the server

    Can I get the filtered data at the bean so that I could print just the filtered data. I hope you will guide me, thank you.

    If you create a custom filter, then you will have easy access to the filtered result. I’m not sure if there is an easy way to do it otherwise.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s