Input text loses focus ExtendedDataTable

[cgillam]

     I have an ExtenedDataTable with some outputText fields and and inputText field.  I am trying to change the color of the row when I enter a valid number into the inputText field and turns red when an invalid value is entered.  I have a keyup event in an a4j:ajax tag but when the table renders I lose focus.  So each time I press a key I have to click the field again to regain focus.  How can I do this?

<rich:extendedDataTable id="extDataTable" styleClass="styleClass" var="var"
          columnClasses="columnClass1,columnClass2"
          rowClasses="rowClass" rowKeyVar="rowKeyvar"
          value="#{bean.records} selection="#{bean.selection}"
          selectionMode="single">

          <rich:column >
               <f:facet name="header">
                     <div class="div1">
                           <h:outputText value="Name" />
                      </div>
               </f:facet>
               <h:panelGroup id=idNameGroup">
                    <h:outputText value="#{bean.displayName}" />
               </h:panelGroup>
          </rich:column>
          .
          .
          .
            <rich:column >
                     <f:facet name="header">
                          <div class="div1">
                                <h:outputText value="Number Value" />
                          </div>
                    </f:facet>
                    <a4j:outputPanel layout="block">
                         <h:inputText id="NewValue" maxlength="7"
                                onkeypress="return event.keyCode!=13;"
                                style="width:50px; height:12px;"
                                 value="#bean.currentValue[var.id]}"
                              <f:converter converterId="numericConverter" />
                              <a4j:ajax event="keyup" limitRender="true"
                                     listener="#{bean.actionModifyRecord(var.id, 'NewValue')}"
                                     render="extDataTable" execute="@this"/>
                        </h:inputText>
                     </a4j:outputPanel>
            </rich:column>

[michpetrov]

Well, do you need to rerender the whole table in the first place? You can use @oncomplete to call a JavaScript function to color the row. If you need to rerender it you can use rich:focus or the FocusManager.

[cgillam]

Thanks for the response.  I don't need to rerender the whole table.  I would just like to highlight the row if each keyup is a valid result.  I just have a few questions.

1.  If i use the oncomplete and javascript will it change the color without rendering the table?

2. Could you show an example of how to do this using the oncomplete and javascript?

[michpetrov]

It will not rerender the table (if you don't tell it to).

The JS function can look something like this:

highlightRow = function(event) {
    var id = event.source.id.replace('input','n'), // assuming 'input' is the id of your input
        element = RichFaces.getDomElement(id);
    
    $(element).addClass('red'); // where 'red' is the name of your CSS class
}

Then you just set oncomplete="highlightRow(event)"

[cgillam]

Thank you Michal this works perfectly.