0 Replies Latest reply on Feb 23, 2016 5:30 AM by Johan Karlsson

    dataTable with both (external) filtering and (built-in) sorting

    Johan Karlsson Newbie

      Hi,

       

      I'm trying to create a table with both sorting and filtering capabilities. I've managed to implement this using the built-in functionality that is provided and it all works fine.

      However, the built-in filtering doesn't fit my needs as it filters the column using startsWith(), I need to use containsIgnoreCase().

       

      However, when I try to use external filtering capabilities in a backing bean, I can't get the layout to display properly.

      Here's my jsf:

       

      <rich:dataTable value="#{publicServiceList.serviceList}"
       
      id="serviceTable" var="_service" rows="20" reRender="ds"
       
      sortMode="single"
       
      columnClasses="listItemLink, listItem, listeItem, listItemLink"
       
      headerClass="listHeader" rowClasses="odd, even"
       
      styleClass="listHeaderBackground">

      <f:facet name="header">
       
      <rich:columnGroup>
       
      <rich:column>
       
      <h:outputText
       
      value="#{messages['public.page.service_A-Z.list.title.SERVICENAME']}" />
       
      </rich:column>
       
      <rich:column>
       
      <h:outputText
       
      value="#{messages['public.page.service_A-Z.list.title.DESCRIPTION']}" />
       
      </rich:column>
       
      </rich:columnGroup>
      </f:facet>

      <rich:column filterBy="#{_service.title}" filterEvent="onkeyup"
       
      filterValue="#{publicServiceList.currentTitleFilterValue}"
       
      sortBy="#{_service.title}">
       
      <s:link view="/public/PublicService.xhtml"
       
      value="#{_service.title}" propagation="none"
       
      id="publicServiceView">
       
      <f:param name="serviceId" value="#{_service.id}" />
       
      </s:link>
      </rich:column>

      <rich:column filterMethod="#{publicServiceList.filterDescription}">
       
      <f:facet name="header">
       
      <h:inputText
       
      value="#{publicServiceList.currentDescriptionFilterValue}"
       
      id="input">
       
      <a4j:support event="onkeyup" reRender="serviceTable , ds"
       
      ignoreDupResponses="true" requestDelay="700"
       
      oncomplete="setCaretToEnd(event);" />
       
      </h:inputText>
       
      </f:facet>
       
      <h:outputText value="#{_service.shortDescription}" />
      </rich:column>

      <f:facet name="footer">
       
      <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
      </f:facet>

       

      This results in the following table:

      R3dDM.png

       

      As you can see, the sorting arrow is not part of my header.

       

      Here's what it looks like using the built-in capabilities shown in the sorting and filtering example here.

      1bJ7i.png

      This works well, but it is too limited with the filtering using startsWith().

       

      Here is the jsf that is used to generate the above shown table:

      <rich:dataTable value="#{publicServiceList.serviceList}"
          id="serviceTable" var="_service" rows="20" reRender="ds"
          sortMode="single"
          columnClasses="listItemLink, listItem, listeItem, listItemLink"
          headerClass="listHeader" rowClasses="odd, even"
          styleClass="listHeaderBackground">
      
      
          <rich:column filterBy="#{_service.title}" filterEvent="onkeyup"
              filterValue="#{publicServiceList.currentTitleFilterValue}"
              sortBy="#{_service.title}">
              <f:facet name="header">
                  <h:outputText
                      value="#{messages['public.page.service_A-Z.list.title.SERVICENAME']}" />
              </f:facet>
              <s:link view="/public/PublicService.xhtml"
                  value="#{_service.title}" propagation="none"
                  id="publicServiceView">
                  <f:param name="serviceId" value="#{_service.id}" />
              </s:link>
          </rich:column>
      
      
          <rich:column filterBy="#{_service.description}"
              filterEvent="onkeyup"
              filterValue="#{publicServiceList.currentDescriptionFilterValue}"
              sortBy="#{_service.shortDescription}">
              <f:facet name="header">
                  <h:outputText
                      value="#{messages['public.page.service_A-Z.list.title.DESCRIPTION']}" />
              </f:facet>
              <h:outputText value="#{_service.shortDescription}" />
          </rich:column>
      
      
          <rich:column filterBy="#{_service.keywordString}"
              filterEvent="onkeyup"
              filterValue="#{publicServiceList.currentKeywordFilterValue}"
              sortBy="#{_service.keywordString}">
              <f:facet name="header">
                  <h:outputText
                      value="#{messages['public.page.service_A-Z.list.title.KEYWORDS']}" />
              </f:facet>
              <h:outputText value="#{_service.keywordString}" />
          </rich:column>
      
      
          <rich:column filterBy="#{_service.organization}"
              filterEvent="onkeyup"
              filterValue="#{publicServiceList.currentOrganizationFilterValue}"
              sortBy="#{_service.organization}">
              <f:facet name="header">
                  <h:outputText
                      value="#{messages['public.page.service_A-Z.list.title.ORGANIZATION']}" />
              </f:facet>
              <s:link view="/public/PublicOrganization.xhtml"
                  value="#{_service.organization.organizationName}"
                  propagation="none" id="publicOrganizationView">
                  <f:param name="organizationId"
                      value="#{_service.organization.organizationId}" />
              </s:link>
          </rich:column>
      
      
          <f:facet name="footer">
              <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
          </f:facet>
      </rich:dataTable>
      
      
      

       

      Is there any way I can override the built-in filtering to use containsIgnoreCase() instead of startsWith()?

      If not, how do I properly display external filtering when the facet cannot contain an element for outputText and an element for inputText?

       

      Best regards

      Johan