8 Replies Latest reply on Jun 2, 2009 10:11 AM by Arthur Purnama

    Get the result of filterby and do something with it

    Arthur Purnama Newbie

      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

        • 1. Re: Get the result of filterby and do something with it
          Ilya Shaikovsky Master

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

          • 2. Re: Get the result of filterby and do something with it
            Arthur Purnama Newbie

            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

            • 3. Re: Get the result of filterby and do something with it
              Ilya Shaikovsky Master

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

              • 4. Re: Get the result of filterby and do something with it
                Arthur Purnama Newbie

                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

                • 5. Re: Get the result of filterby and do something with it
                  Ilya Shaikovsky Master

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

                  • 6. Re: Get the result of filterby and do something with it
                    Arthur Purnama Newbie

                    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

                    • 7. Re: Get the result of filterby and do something with it
                      Ilya Shaikovsky Master

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

                      • 8. Re: Get the result of filterby and do something with it
                        Arthur Purnama Newbie

                        Thank you very much for the reply.

                        Arthur