p:datatable filter: cannot validate component with empty value

Question

Is there a way to filter a p:datatable column by clicking on the text inside and making this text the filter ?

In other words, if I click on a session ID, I would like the datatable to filter this column by the clicked ID, as if I had entered it manually in the filter above ?

I am using Primefaces 6

UPDATE

This is my complete Datatable with the suggested solution:

<p:dataTable id="tablealltx" var="transaction" value="#{pastTxModel.txList}" paginator="true" rows="20" sortBy="#{transaction.createdDate}" sortOrder="descending" resizableColumns="true">             

    <p:column filterBy="#{transaction.session}" filterMatchMode="contains">

        <f:facet name="filter">
            <p:inputText id="myFilter" value="#{transactionXmlController.currentFilter}" onchange="PF('alltxform').filter()" />
        </f:facet>

        <p:outputLabel value="#{transaction.session}" ondblclick="document.getElementById('alltxform:tablealltx:myFilter').value = this.innerText;PF('tablealltx').filter()" >        
    </p:column>
</p:dataTable>

When I double click on the session, the value is entered in the filter text box, but the filtering itself does not work. Nothing happens.

I am using TomEE 7.0.1

Solution Copy Paste from Jasper:

The data table in your question doesn't have a widgetVar set to tablealltx, so PF('tablealltx').filter() will fail. You can test it by entering PF('tablealltx') in your browser's JavaScript console.

There is the event <p:ajax event="rowDblselect">. If you can get the clicked text in the filter-field I guess you can end with PF('datatablewv').filter(). I haven't tried it though — Jaqen H'ghar
– Jaqen H'ghar, Commented Sep 30, 2016 at 6:08

Community · Accepted Answer · 2017-05-23 10:34:15Z

2

I was able to achieve this by setting widgetVar="myTable" to the data table, using a custom filter field, replacing the cell contents with p:outputLabel (which has ondblclick) and JavaScript it all together:

<p:column headerText="Session" filterBy="#{transaction.session}" ...>
    <f:facet name="filter">
        <p:inputText id="myFilter"
                     value="#{myBean.myFilter}"
                     onchange="PF('myTable').filter()"/>
    </f:facet>
    <p:outputLabel value="#{transaction.session}"
                   ondblclick="document.getElementById('myForm:myTable:myFilter').value = this.innerText;PF('myTable').filter()"/>
</p:column>

For better readability, here's the ondblclick:

var filterId = 'myForm:myTable:myFilter';
document.getElementById(filterId).value = this.innerText;
PF('myTable').filter();

You could replace p:outputLabel with a simple h:outputText, but in that case (assuming you are on JSF 2.2+) you need to add the namespace xmlns:a="http://xmlns.jcp.org/jsf/passthrough". Now you can use:

<h:outputText value="#{transaction.session}"
              a:ondblclick="..."/>

9 Comments

Tim Over a year ago

Almost there - this puts the text into the filter field but the filtering does not work: cannot validate component with empty value: alltxform:tablealltx:myFilter.

Jasper de Vries Over a year ago

Did some googling. Seems this is due to an input without value. Probably that's JSF implementation related (I'm on Mojarra 2.2.7). I'll update the answer (it's working for me both with and without value).

Kukeltje Over a year ago

Can't you use an h:outputtext? This is kind of wrong usage (abuse?)of an outputLabel

Tim Over a year ago

But the problem comes from the inputText. What is #{myBean.myFilter} bound to in your answer ?

Jasper de Vries Over a year ago

The data table in your question doesn't have a widgetVar set to tablealltx, so PF('tablealltx').filter() will fail. You can test it by entering PF('tablealltx') in your browser's JavaScript console.

|

Collectives™ on Stack Overflow

p:datatable filter: cannot validate component with empty value

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related