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 responses to “RichFaces – using built-in filtering”

  1. Lei Avatar
    Lei

    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.

    Reply
  2. max Avatar
    max

    You can add page level a4j:queue and set requesDelay. You can also use custom filtering and add requestDelay to the a4j:support: http://mkblog.exadel.com/maxablog/richfaces-filtering-with-custom-function/.

    The page shouldn’t be refreshing, only the table. Also, the user shouldn’t lose the input.

    Reply
  3. luis Avatar
    luis

    hey,
    is it possible to do the same (filtering thing) with a listShuttle ???

    Reply
  4. max Avatar
    max

    @luis: I don’t think it’s possible with listShuttle

    Reply
  5. skyhan Avatar
    skyhan

    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?

    Reply
  6. max Avatar
    max

    @skyhan: if you use custom filtering function you can define the input field size: http://mkblog.exadel.com/2008/11/richfaces-filtering-with-custom-function/

    Reply
  7. lee Avatar
    lee

    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?

    Reply
  8. max Avatar
    max

    @lee: No, I don’t know why Chrome hangs. Check with Chrome’s dev tools to see if there are any JavaScript errors…

    Reply
  9. pramod Avatar
    pramod

    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.

    Reply
  10. max Avatar
    max

    @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.

    Reply
  11. Gus Smith Avatar
    Gus Smith

    Is it possible to use a suggentionbox as filter input? I am using v3.3

    Reply
    1. max Avatar
      max

      Yes, you can do that.

      Reply

Leave a comment