Get the result of filterby and do something with it

[purnama]

Hello,

I hope my question is understandable. I have a Table like this :

Type | Recipient | Amount
A | Max Test | -100
A | Maria MusterFrau | -200
B | Andreas Mustermann | 250

Amount Total : -50

I create the table with rich:dataTable. On every column i have filterBy and sortBy Method. The code is like this:

<h:panelGrid id="aRenderPanel" >
 <rich:dataTable id="reveneueTable" value="#{revenueReportBean.revenues}" var="revenue" width="500px" columnClasses="center, revenueHeight" rows="8" reRender="ds, aRenderPanel, scrollInfo" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
 onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

 <f:facet name="header">
 <h:outputText value="Umsätze"/>
 </f:facet>
 <rich:column sortBy="#{revenue.transactionDate}" >
 <f:facet name="header">
 <h:outputText value="Datum"/>
 </f:facet>
 <h:outputText value="#{revenue.transactionDate}">
 <f:convertDateTime pattern="dd.MM.yyyy" timeZone="GMT+2" />
 </h:outputText>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
 </rich:column>
 <rich:column sortBy="#{revenue.type}" filterBy="#{revenue.type}" filterEvent="onkeyup" >
 <f:facet name="header">
 <h:outputText value="Art" ></h:outputText>
 </f:facet>
 <h:outputText value="#{revenue.type}"/>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
 </rich:column>
 <rich:column sortBy="#{revenue.recipient}" filterBy="#{revenue.recipient}" filterEvent="onkeyup" >
 <f:facet name="header">
 <h:outputText value="Empfänger"/>
 </f:facet>
 <h:outputText value="#{revenue.recipient}"/>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
 </rich:column>
 <rich:column sortBy="#{revenue.amount}" align="right" filterBy="#{revenue.amount}" filterEvent="onkeyup" >
 <f:facet name="header">
 <h:outputText value="Betrag"/>
 </f:facet>
 <h:outputText value="#{revenue.amount}" >
 <f:convertNumber type="currency" currencyCode="EUR" maxFractionDigits="2" />
 </h:outputText>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
 </rich:column>
 <rich:column filterMethod="#{revenueReportBean.filterTags}" >
 <f:facet name="header">
 <h:inputText value="#{revenueReportBean.filterTagsValue}" id="tagFilter">
 <f:verbatim>Tags<br/></f:verbatim>
 <a4j:support event="onkeyup" reRender="reveneueTable, filterAmountTotalText" ignoreDupResponses="true" requestDelay="700" oncomplete="setCaretToEnd(event);" />
 </h:inputText>
 </f:facet>
 <rich:dropSupport id="dropSupporter" dropValue="bla" value="blub" acceptedTypes="tags"
 dropListener="#{revenue.processDrop}" reRender="tagsRepeat, reveneueTable" >
 <rich:dndParam name="revenue" value="#{revenue}" />
 </rich:dropSupport>
 <a4j:repeat id="tagsRepeat" value="#{revenue.tags}" var="tag">
 <a4j:commandButton value="#{tag.name}" style="margin-right: 2px; margin-bottom: 2px;"
 actionListener="#{revenue.removeTag}" reRender="tagsRepeat, reveneueTable" />
 </a4j:repeat>
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller id="ds" reRender="scrollInfo, pageIndexText"
 renderIfSinglePage="false" pageIndexVar="pageIndex" pagesVar="pages" inactiveStyle="color: grey !important; border-top-color: grey !important;">
 </rich:datascroller>
 </f:facet>
 </rich:dataTable>
 <h:outputText id="pageIndexText" value="Seite #{pageIndex} von #{pages} #{pageCount} " rendered="#{pages ge 1}" />
 <br />
 <h:outputText id="filterAmountTotalText" value="Gesamt Summe: #{revenueReportBean.filterAmountTotal}" >
 <f:convertNumber type="currency" currencyCode="EUR" maxFractionDigits="2" />
 </h:outputText>
 <br />
</h:panelGrid>

I Want to do something like this:
If the user do the filter (write something in the filter input field) the "Amount Total" should be changed dynamically according to the filter result.

I tried to do it with filterMethod instead of filterBy. And it works. Each object will go through my custom filter method and if the object passed the filter criteria, i will manipulate the "amout total" accordingly.


But if i use filterMethod, i can not use sortBy because the sort event will be in the custom filter input field. thats means, everytime user klick on the filter input field. it will try to sort. user wont have a chance to type anything in the filter input field.

So now im looking for a way which i can sum up the "amount total" of the filter result. and still having the sortby functioning.

thank you
Arthur

[ilya_shaikovsky]

add onclick="return false;" to the input.

[purnama]

Hello,

Thanks for the reply.
As a test i try to alter a column like this:

<rich:column sortBy="#{revenue.amount}" filterMethod="#{revenueReportBean.filterTags}" >
 <f:facet name="header">
 <!-- <h:outputText value="Betrag"/> -->
 <h:inputText value="#{revenueReportBean.filterTagsValue}" id="tagTest" onclick="return false;">
 <f:verbatim>Betrag<br/></f:verbatim>
 <a4j:support event="onkeyup" reRender="reveneueTable, filterAmountTotalText" ignoreDupResponses="true" requestDelay="700" oncomplete="setCaretToEnd(event);" />
 </h:inputText>
 </f:facet>
 <h:outputText value="#{revenue.amount}" >
 <f:convertNumber type="currency" currencyCode="EUR" maxFractionDigits="2" />
 </h:outputText>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
</rich:column>

I put an onclick="return false;" on the h:inputText . it still not functioning. everytime i want to write something in the input field. it try to sort. and the sort arrow icon is now at the right side of the input field. its not at the right side of the "Betrag" text anymore.

Did i do something wrong? or i dont understand your reply correctly?

Thank you,
Arthur

[ilya_shaikovsky]

sorry. try not return false but Event.stop(event);

[purnama]

Hello,

Thanks again for the reply. I alter the code like this

<rich:column align="right" sortBy="#{revenue.amount}" filterMethod="#{revenueReportBean.filterAmounts}" >
 <f:facet name="header">
 <h:inputText value="#{revenueReportBean.filterAmountsValue}" id="amountFilter" onclick="Event.stop(event);">
 <f:verbatim>Betrag<br/></f:verbatim>
 <a4j:support event="onkeyup" reRender="reveneueTable, filterAmountTotalText" ignoreDupResponses="true" requestDelay="700" oncomplete="setCaretToEnd(event);" />
 </h:inputText>
 </f:facet>
 <h:outputText value="#{revenue.amount}" >
 <f:convertNumber type="currency" currencyCode="EUR" maxFractionDigits="2" />
 </h:outputText>
 <a4j:support event="onmouseover" reRender="revenueDetails" actionListener="#{revenueReportBean.processRevenueDetail}">
 <a4j:actionparam name="rowid" value="#{revenue.id}" assignTo="#{revenueReportBean.detailEntityId}" />
 </a4j:support>
</rich:column>

And it works nicely. I thank you once again.

I still have a problem with the sort icon position. The sort icon is on the right side of the input field. how can i place the sort icon at the right side of the "Betrag" header?

thank you
Arthur

[ilya_shaikovsky]

check the positioning styles applied with firebug and redefine as you need.

[purnama]

Hello,

Thanks for the reply.

The above code (from my last post) will be generated like this

<span class="dr-table-sortable-header">
Betrag
<br/>
<input id="j_id11:reveneueTable:amountFilter" type="text" onkeyup="A4J.AJAX.Submit('_viewRoot','j_id11',event,{'ignoreDupResponses':true,'implicitEventsQueue':'j_id11:reveneueTable:j_id40','oncomplete':function(request,event,data){setCaretToEnd(event);},'similarityGroupingId':'j_id11:reveneueTable:j_id40','parameters':{'j_id11:reveneueTable:j_id40':'j_id11:reveneueTable:j_id40'} ,'requestDelay':700,'actionUrl':'/Bank2.0/finance/accounts.jsf'} )" onclick="Event.stop(event);" value="" name="j_id11:reveneueTable:amountFilter"/>
<img class="dr-table-header-sort-img rich-sort-icon" height="15" width="15" alt=" " src="/Bank2.0/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.iconimages.DataTableIconSortNone/DATB/eAFjYGD4!!8!AAYAAv4_.jsf"/>
</span>

first of all, i think i can not alter the style. because it will affect other sort icons too.
And secondly. the sort image is always generated after the input field. is there any chance to tell the richfaces or JSF to generate the image between the "Betrag" text and the "" Tag?

thank you
Arthur

[ilya_shaikovsky]

unfortunatelly seems the only solution is to use external sorting also and define the header fully on your own.

[purnama]

Thank you very much for the reply.

Arthur