SelectOneChoice table filter execute automatically

August 6th, 2010 | Posted by in Oracle ADF | 4 Comments

I created a table filter with a SelectOneChoice component and I was very disappointed to find out that I have to press the ENTER in order to actualy filter the table.

I was expecting to see the filtered results as soon as I selected the desired option or at least at leaving the SelectOneChoice component but sadly enough that wasn’t design to happen.

One solution is to write a javascript method that simulates the ENTER pressing on the SelectOneChoice component and call it when a new value is selected from the filter.

For that we need a clientListener on the filter that is going to be triggered at valueChange and executes the method mentioned above.

For the sample application I used the HR schema that comes with Oracle DB.

The employees page will have a SelectOneChoice filter in the Department column and that filter will be executed as soon as a selection is made and you will not have to press anything.

The code for the client listener looks like this:

            <f:facet name="filter">
              <af:selectOneChoice value="#{vs.filterCriteria.DepartmentId}"
                                  label="Dep" unselectedLabel="" id="soc2">
                <af:forEach items="#{bindings.DepartmentsVO.rangeSet}"
                  <f:selectItem id="si2" itemLabel="#{item.DepartmentName}"
                <af:clientListener type="valueChange"

The javascript method will have to fire the keyboard events different depending on the browser because of course IE has another way of doing things.

      <f:facet name="metaContainer">
      <af:resource type="javascript">
          function executeSelection(event){
            jsEl= document.getElementById(event.getSource().getClientId());
              // FF
              var evt = document.createEvent("KeyboardEvent");
                               "keydown",        //  in DOMString typeArg,                                                           
                                true,             //  in boolean canBubbleArg,                                                        
                                true,             //  in boolean cancelableArg,                                                       
                                null,             //  in nsIDOMAbstractView viewArg,  Specifies UIEvent.view. This value may be null.     
                                false,            //  in boolean ctrlKeyArg,                                                               
                                false,            //  in boolean altKeyArg,                                                        
                                false,            //  in boolean shiftKeyArg,                                                      
                                false,            //  in boolean metaKeyArg,                                                       
                                 13,               //  in unsigned long keyCodeArg,                                                      
              // IE
              evt = document.createEventObject();
              evt.keyCode = 13;
              jsEl.fireEvent("onkeydown", evt);

The sourcecode for the sample application can be downloaded from here.


4 Responses to “SelectOneChoice table filter execute automatically”

  1. Manoj says:


    Im guessing you already did but have you tried setting the autoSubmit property for the selectOneChoice component to “true”?

  2. Nicolas says:

    Nice Post,
    Thanks for sharing.

    For information,
    It is working with autoSubmit = “true”

    This JavaScript code don’t work with “Google Chrome” browser… (version 13.0.782)

  3. Mylene says:

    Thanks for sharing this post! It helped me a lot in solving my problem with select one choice as filter for my ADF table. Thanks also to Manoj and Nicolas for letting me realize that I just forgot to set autoSubmit to true. Whew!

Leave a Reply