4 Replies Latest reply on Nov 7, 2013 4:57 AM by martam

    Filter in collapsibleSubTable

    Mikael Vivier Newbie

      Hi,

      I need to put filters (and sort if possible) in a collapsibleSubTable but I can't make it works perfectly.

      My environment :

      - Richfaces 4.3.4.Final

      - Server Tomcat 6.0.36

       

      First, here is my code without filters :

      <rich:dataTable id="rolesAppliDataTableId" value="#{utilmanBean.listRoles}" var="role" rows="10">
          <f:facet name="header">           
              <rich:columnGroup>
                  <rich:column style="width:30%">
                      <h:outputText value="#{AM['label.role']}"/>
                  </rich:column>
                  <rich:column style="width:40%">
                      <h:outputText value="#{AM['label.description']}"/>
                  </rich:column>
                  <rich:column style="width:15%">
                      <h:outputText value="#{AM['label.area']}"/>
                  </rich:column>
                  <rich:column style="width:15%">
                      <h:outputText value="#{AM['label.privilege']}"/>
                  </rich:column>
              </rich:columnGroup>
          </f:facet>
         
          <rich:collapsibleSubTable id="rolesAppliSubDataTableId" value="#{role.listAccesses}" var="access" rowKeyVar="rowKey" onrowclick="#{rich:element('selectRoleAppliId')}.click()">
              <rich:column rowspan="#{role.nbAccessesInList}" rendered="#{rowKey eq 0}" styleClass="cursorClass">
                  <h:outputText value="#{role.name}"/>
                  <!-- handle clic -->
                  <a4j:commandButton style="display:none" id="selectRoleAppliId" action="#{utilmanController.selectRole}" render="panelAppliId" execute="@this" status="void">
                      <f:setPropertyActionListener target="#{utilmanBean.currentRole}" value="#{role}"/>
                  </a4j:commandButton>
              </rich:column>
              <rich:column rowspan="#{role.nbAccessesInList}" rendered="#{rowKey eq 0}" styleClass="cursorClass">
                  <h:outputText value="#{role.description}"/>
              </rich:column>
              <rich:column styleClass="cursorClass">
                  <h:outputText value="#{access.area}"/>
              </rich:column>
              <rich:column styleClass="cursorClass">
                  <h:outputText value="#{access.privilege.name}"/>
              </rich:column>
          </rich:collapsibleSubTable>
      </rich:dataTable>
      <rich:dataScroller for="rolesAppliDataTableId" renderIfSinglePage="false" boundaryControls="#{commonBean.hide}" fastControls="#{commonBean.hide}" status="void" style="width:100%" render="rolesAppliDataTableId"/>
      
      

       

      It works as intended and I got this :

      collaps_good.png

      Now I try to add filters for each columns. Here is my code :

      <rich:dataTable id="rolesAppliDataTableId" value="#{utilmanBean.listRoles}" var="role" width="100%" rows="10">           
          <f:facet name="header">
              <rich:columnGroup>
                  <rich:column style="width:30%">
                      <h:panelGrid width="100%">
                          <h:outputText value="#{AM['label.role']}"/>
                          <h:inputText value="#{commonBean.filterValues[1]}">
                              <a4j:ajax event="keyup" render="@body,rolesAppliDsId" status="void"/>
                          </h:inputText>
                      </h:panelGrid>
                  </rich:column>                       
                  <rich:column style="width:40%">
                      <h:panelGrid width="100%">
                          <h:outputText value="#{AM['label.description']}"/>
                          <h:inputText value="#{commonBean.filterValues[2]}">
                              <a4j:ajax event="keyup" render="@body,rolesAppliDsId" status="void"/>
                          </h:inputText>
                      </h:panelGrid>
                  </rich:column>                       
                  <rich:column style="width:15%">
                      <h:panelGrid width="100%">
                          <h:outputText value="#{AM['label.area']}"/>
                          <h:inputText value="#{commonBean.filterValues[3]}">
                              <a4j:ajax event="keyup" render="@body,rolesAppliDsId" status="void"/>
                          </h:inputText>
                      </h:panelGrid>
                  </rich:column>                       
                  <rich:column style="width:15%">
                      <h:panelGrid width="100%">
                          <h:outputText value="#{AM['label.privilege']}"/>
                          <h:inputText value="#{commonBean.filterValues[4]}">
                              <a4j:ajax event="keyup" render="@body,rolesAppliDsId" status="void"/>
                          </h:inputText>
                      </h:panelGrid>
                  </rich:column>
              </rich:columnGroup>
          </f:facet>
         
          <rich:collapsibleSubTable expanded="true" id="rolesAppliSubDataTableId" value="#{role.listAccesses}" var="access" rowKeyVar="rowKey" onrowclick="#{rich:element('selectRoleAppliId')}.click()">
              <rich:column filterExpression="#{fn:containsIgnoreCase(role.name,commonBean.filterValues[1])}" rowspan="#{role.nbAccessesInList}" rendered="#{rowKey eq 0}" styleClass="cursorClass">
                  <h:outputText value="#{role.name}"/>
                  <!-- handle clic -->
                  <a4j:commandButton style="display:none" id="selectRoleAppliId" action="#{utilmanController.selectRole}" render="panelAppliId" execute="@this" status="void">
                      <f:setPropertyActionListener target="#{utilmanBean.currentRole}" value="#{role}"/>
                  </a4j:commandButton>
              </rich:column>
              <rich:column filterExpression="#{fn:containsIgnoreCase(role.description,commonBean.filterValues[2])}" rowspan="#{role.nbAccessesInList}" rendered="#{rowKey eq 0}" styleClass="cursorClass">
                  <h:outputText value="#{role.description}"/>
              </rich:column>
              <rich:column styleClass="cursorClass" filterExpression="#{fn:containsIgnoreCase(access.area,commonBean.filterValues[3])}">
                  <h:outputText value="#{access.area}"/>
              </rich:column>
              <rich:column styleClass="cursorClass" filterExpression="#{fn:containsIgnoreCase(access.privilege.name,commonBean.filterValues[4])}">
                  <h:outputText value="#{access.privilege.name}"/>
              </rich:column>
          </rich:collapsibleSubTable>
      </rich:dataTable>
      <rich:dataScroller id="rolesAppliDsId" for="rolesAppliDataTableId" renderIfSinglePage="false" boundaryControls="#{commonBean.hide}" fastControls="#{commonBean.hide}" status="void" style="width:100%" render="rolesAppliDataTableId"/>
      
      

       

      So, with this code, only the 3rd and 4th filter work, and I got some strange lines which appear :

      collaps_bad.png

       

      Have you an idea of why it doesn't work and how I can make this work ?

       

      Thanks