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}"
                            var="item">
                  <f:selectItem id="si2" itemLabel="#{item.DepartmentName}"
                                itemValue="#{item.DepartmentId}"/>
                </af:forEach>
                <af:clientListener type="valueChange"
                  method="executeSelection"/>
              </af:selectOneChoice>
            </f:facet>

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());
            if(document.createEvent){
              // FF
              var evt = document.createEvent("KeyboardEvent");
              evt.initKeyEvent(                                                                                      
                               "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,                                                      
                                 0);
              jsEl.dispatchEvent(evt);
            }else{
              // IE
              evt = document.createEventObject();
              evt.keyCode = 13;
              jsEl.fireEvent("onkeydown", evt);
            }
          }
      </af:resource>
      </f:facet>

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

Tags:

4 Responses to “SelectOneChoice table filter execute automatically”

  1. Manoj says:

    Hi,

    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”
    (JDev 11.1.1.4)

    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