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 . 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, Sep 30 '16 at 06:08

score 2 · Accepted Answer · edited May 23 '17 at 10:34

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="..."/>

See also:

Custom HTML tag attributes are not rendered by JSF

edited May 23 '17 at 10:34

Community

1
1

answered Sep 30 '16 at 07:42

Jasper de Vries

19,370
6
64
102

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. – Tim Sep 30 '16 at 08:04
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`). – Jasper de Vries Sep 30 '16 at 08:59
Can't you use an `h:outputtext`? This is kind of wrong usage (abuse?)of an outputLabel – Kukeltje Sep 30 '16 at 09:06
1

But the problem comes from the inputText. What is #{myBean.myFilter} bound to in your answer ? – Tim Sep 30 '16 at 09:13
Just a `String` property. – Jasper de Vries Sep 30 '16 at 09:14
Filtering still does nothing. I see the ajax loader for a second, but nothing happens – Tim Sep 30 '16 at 09:23
2

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. – Jasper de Vries Sep 30 '16 at 09:30
Make a small function of the javascript for even better readability – Kukeltje Sep 30 '16 at 09:39
@JasperdeVries the widgetVar solved the problem. Thanks – Tim Oct 10 '16 at 08:26

p:datatable filter: cannot validate component with empty value

1 Answers1

Linked