outputText and inputText in f:facet of rich:column doesn't work - JSF

0
votes

I'm trying to achieve external filtering using rich:dataTable which has sorting ability.

Here's what I have tried:

<rich:column sortBy="#{data.name}" id="name" filterMethod="#myBean.filter}">
                <f:facet name="header">
                    <h:outputText value="Name" />
                    <h:inputText value="#{myBean.currentName}"
                        id="nameFilterInput" onclick="Event.stop(event)" onkeypress="searchNameOnEnter(event, this);">
                                        <a4j:support event="onkeyup" reRender="dataTable , ds"
                                            ignoreDupResponses="true" requestDelay="700" />
                                    </h:inputText>
                </f:facet>
                <h:outputText value="#{data.name}" />
</rich:column>

Problem: The input text field is overwriting the output text (the header name)

I've tried using h:panelGroup inside the f:facet, but the problem is the sort icon is rendered in the third row seperately.

What am I missing here? Any help would be great.

Updated: @Christophe Roussy, here's the screenshot Screenshot

As seen the inputText is overwriting the outputText.

Update 2: I saw a post here: https://community.jboss.org/thread/13046 which explains to use <f:facet name="filter"> for inputText, but that seems to work only for rich:extendedDataTable. Any way to make it work with rich:dataTable?

1
jsfrichfaces
I have something similar and it shows both, do you have a screenshot ? – Christophe Roussy

1 Answers

3
votes

The <f:facet> can have only one child. Wrap them in a <h:panelGroup>.

<f:facet name="header">
    <h:panelGroup>
        <h:outputText ... />
        <h:inputText ... />
    </h:panelGroup>
</f:facet>