Richfaces column Filter: How to fire an event on intro key

Question

I have a rich:extendedDataTable and I am using column filtering. I want the filter to be fired once the user enters the "intro" key, but in javascript there is no such event.

I want to do so because if I use events such as onkeyup I get too many requests and I have problems because of that. I'm using richfaces 3.3.0GA and facelets.

This is the component:

<ui:composition>
<a4j:form ajaxSingle="true" requestDelay="700">
    <rich:extendedDataTable id="tablePatients" value="#{user.patientsTab.patients}" var="patient" rows="20" 
        onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
        <f:facet name="header">
            <h:outputText value="Patient List" />
        </f:facet>
        <rich:column label="#{msg.id}">
            <f:facet name="header">
                <h:outputText value="Id" />
            </f:facet>
            <h:outputText value="#{patient.id}" id="patientId" />
        </rich:column>
        <rich:column label="#{msg.name}"  sortable="true" filterBy="#{patient.profile.name}" filterEvent="onkeyup">
            <f:facet name="header">
                <h:outputText value="Name" />
            </f:facet>
            <h:outputText value="#{patient.profile.name}" id="name" style="#{patient.isUnrated? 'font-weight:bold':''}" />
        </rich:column >
        <rich:column label="#{msg.lastexamination}" sortable="true">
            <f:facet name="header">
                <h:outputText value="Last Examination" />
            </f:facet>
            <h:outputText value="#{patient.lastExaminationDate}" style="#{patient.isUnrated? 'font-weight:bold':''}" />
        </rich:column>
        <rich:column label="#{msg.action}">
            <f:facet name="header">
                <h:outputText value="#{msg.action}"></h:outputText></f:facet>
            <a4j:commandLink id="editlink" oncomplete="#{rich:component('patientPanel')}.show()" reRender="a4jPatientPanel">
                <h:graphicImage value="/images/icons/PNG-24/Add.png" style="border:0" />
                <f:setPropertyActionListener value="#{patient}" target="#{user.patientsTab.patientPanel.patient}" />
            </a4j:commandLink>
            <rich:toolTip for="editlink" value="Edit" />
        </rich:column>

        <f:facet name="footer">
            <rich:datascroller renderIfSinglePage="false" maxPages="5" />
        </f:facet>
    </rich:extendedDataTable>

    </a4j:form>

    <ui:include src="/pages/panels/patientPanel.xhtml" />
</ui:composition>

score 5 · Accepted Answer · edited Jul 16 '12 at 18:23

5

Unfortunately, there is no easy way to customize this functionality. There are options to make it more usable, though:

<a4j:queue requestDelay="1000" ignoreDupResponce="true" /> - place this in your <a4j:form> or <a4j:region> and your onkeyup requests will be delayed and grouped. See richfaces demo page:
- Setting ignoreDupResponces to true reduces the count of DOM updates on typing inside the input. (in initial state count of updates is equals to count of requests)
- Disabling the queue causes fully asynchronous updates. Note that updates could appear not only in direct order and as a result you could get wrong string.
- Setting request delay to greater value reduces the requests count on fast typing. (More similar requests are combined in the result)

I'm currently using the following alternative:

<rich:dataTable (..some attributes..)
    onkeypress="if (event.keyCode == 13) {document.getElementById('formId:tableId:j_id70fsp').blur(); return false;} else {return true;}"
    ><!-- disabling submit-on-enter -->
    <rich:column label="#{msg.name}" sortable="true" 
       filterBy="#{patient.profile.name}" filterEvent="onblur">
</rich:dataTable>

Where you have to see the generated id for j_id70fsp. It is not guaranteed that it will remain such forever, though.

And the result is that the column is filtered on pressing the enter key, which is fairly usable.

edited Jul 16 '12 at 18:23

Kijewski

25,517
12
101
143

answered Feb 17 '10 at 10:32

Bozho

588,226
146
1,060
1,140

Mmmm I've tried it and it's not working. I press enter and nothing happens. If I click outside of the input field (onblur) it filters. I've tried with extendedDataTable and with dataTable. Same result. – pakore Feb 17 '10 at 10:48
is there any way to delay the request? apparently "requestDelay" in "a4j:form" is not delaying... Thanks for the response though. – pakore Feb 17 '10 at 11:02
not out-of-the-box. But there might be some workaround. I'll think about it. – Bozho Feb 17 '10 at 11:03
I've tried this: onkeypress="if (event.keyCode == 13) {alert('hola');this.blur(); return false;} else {return true;}" and it works!...any suggestion why is working with an alert? Maybe is related to the blur (alert gets focus i guess) – pakore Feb 17 '10 at 11:05
strangely enough it had stopped working here as well. So I'll have to dig into it anyway :) – Bozho Feb 17 '10 at 11:10
Delay is working perfect. I'm gonna try how to get the element Id. Thanks for the answer Bozho. – pakore Feb 17 '10 at 12:33
Thank you so much. I am using a server side filter with a manual input box and this approach worked perfectly. Allows the user to mash the ENTER button as they're wont to do. Also, as I place the filter input box manually I was able to refer to it by its immutable element ID. – Lisa Nov 19 '12 at 04:14

score 2 · Answer 2 · edited Mar 19 '12 at 18:20

Bozho is right, but instead of using getElementById I prefer using this script:

<rich:extendedDataTable onkeypress="
if (!event) { var event = window.event; }
if (event.keyCode == 13) {
    var targ;
    if (event.target) targ = event.target;
    else if (event.srcElement) targ = event.srcElement;
    if (targ.nodeType == 3) targ = targ.parentNode;
    if (targ) targ.blur();
    return false;
} else return true;">

It should work with FF, EI, Safari(the targ.nodeType == 3 thing).

score 1 · Answer 3 · edited Jul 16 '12 at 18:23

1

Keep the onkeyup event and create a queue and associate it with the dataTable. It works but its undocumented:

<a4j:queue name="qFilter" ignoreDupResponses="true" size="1" requestDelay="600" sizeExceededBehavior="dropNext"/>

<rich:dataTable ... eventsQueue="qFilter">
...

edited Jul 16 '12 at 18:23

Kijewski

25,517
12
101
143

answered Jul 16 '12 at 14:17

Israel Rios

21
1

score 1 · Answer 4 · answered Jun 21 '11 at 17:51

1

function filterAllOnEnter(event)
{
   if(event.keyCode == 13)
   {
      jQuery(".rich-filter-input").blur();
      return false;
   }
   else
   {
      return true;
   }
}

<rich:dataTable onkeydown="filterAllOnEnter(event)" ... >

Works for me.

answered Jun 21 '11 at 17:51

Matthew Clement

19
3

score 1 · Answer 5 · edited Mar 19 '12 at 20:58

1

With Richfaces 3.3.3, you must to quit the filter event (filterEvent="onblur") from each rich:column and then you will be able to filter only when enter key is pressed!

edited Mar 19 '12 at 20:58

Unai Vivi

3,073
3
30
46

answered Mar 06 '12 at 17:41

Angel_JAVA

11
1

Richfaces column Filter: How to fire an event on intro key

5 Answers5

Linked