4 Replies Latest reply on Feb 22, 2017 4:27 PM by cgillam

Input text loses focus ExtendedDataTable

cgillam Feb 22, 2017 5:36 AM

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>

1. Re: Input text loses focus ExtendedDataTable

michpetrov Feb 22, 2017 5:43 AM (in response to cgillam)

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.
Actions
2. Re: Input text loses focus ExtendedDataTable

cgillam Feb 22, 2017 11:11 AM (in response to michpetrov)

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?
Actions
3. Re: Input text loses focus ExtendedDataTable

michpetrov Feb 22, 2017 12:06 PM (in response to cgillam)
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)"
Actions
4. Re: Input text loses focus ExtendedDataTable

cgillam Feb 22, 2017 4:27 PM (in response to michpetrov)

Thank you Michal this works perfectly.
Actions

Go to original post