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

[jkarv]

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:

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.

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