1 Reply Latest reply on Oct 9, 2013 9:47 AM by Mikael Vivier

    How to re-render the table body only when using rich:collapsibleSubTable?

    bfenlon Newbie

      Hi Folks,

       

      I have a rich:dataTable that uses a rich:collapsibleSubTableToggler to toggle content in a rich:collapsibleSubTable. The toggling works perfectly however the table requires filtering and this is being problamatic. Other tables in the project are configured the following way and work as expected - render="userNotificationsTable@body" but this doesn't work on the table using the rich:collapsibleSubTable. The response appeared to be returning the filtered results but it just wasn't getting displayed on screen.

       

      I update the render attribute to render the entire table but then the input filter lost focus as a result - render="userNotificationsTable". I've tried explicitly setting the focus using javascript which kind of work but I have to entered the filter text slowly into the input field or it gets lost e.g. if I entered "User text" the table may re-rendered with the filter value set to "Use". 

       

      Hopefully someone out there has come across this/these issue(s) and can point me in the right direction. 1) Is there a way to re-rended the table body only so the input filters are not re-rendered or 2) how can I "delay" the filtering event until I've finished typing in the input field. I've attached the table (with some columns removed for ease of reading).

       

      Thanks.

        • 1. Re: How to re-render the table body only when using rich:collapsibleSubTable?
          Mikael Vivier Newbie

          I know it's kind late since this question has been asked but here is the solution :

          <rich:column style="width:30%">
              <h:panelGrid width="100%">
                  <h:outputText value="#{AM['label.role']}"/>
                  <h:inputText id="filterNameId" value="#{filterBean.name}" onfocus="putCursorAtEnd(this)">
                      <a4j:ajax event="keyup" render="rolesAppliDataTableId,rolesAppliDsId" status="void" listener="#{filterBean.filterRoles}" oncomplete="focusField('mainFormId:rolesAppliDataTableId:filterNameId')">
                          <a4j:attachQueue requestDelay="500"/>
                      </a4j:ajax>
                  </h:inputText>
              </h:panelGrid>
          </rich:column>
          
          

          So, to add a delay, you just do this : <a4j:attachQueue requestDelay="500"/>

           

          For information and if someone is stuck on this here are the two javascript functions you need to make this work :

          function putCursorAtEnd(TB) {   
              if (TB.createTextRange) {
                  var FieldRange = TB.createTextRange();
                  FieldRange.moveStart('character', TB.value.length);
                  FieldRange.collapse();
                  FieldRange.select();
              }
          }
          
          
          function focusField(field) {
              document.getElementById(field).focus();
              document.getElementById(field).focus();    // 2 focus cause of IE8
          }
          
          
          
          

           

          If you have find an other way to handle filters on "rich:collapsibleSubTable" let me know ! (Here is my thread : Filter in collapsibleSubTable)