8 Replies Latest reply on Sep 22, 2010 9:04 AM by franboragina

    ? how to use rich:calendar to filter by date?

    jjfraney

      I'm trying to get what I want out of the extendedDataTable filter feature.  Thank you if you can provide an answer.

       

      I have a date column in my extedendDataTable.  I've been able to filterby a date picked by a rich:calendar, but this is what it looks like:

       

      date-filter-by.png

       

      I would rather it look like this (bit of gimp editing here):

      date-filter-by-fixed.png

       

      This is my xhtml:

       

       

                  <rich:extendedDataTable id="assignmentsTable" var="assignment"
                            value="#{assignmentsList.resultList}"
                         rendered="#{not empty assignmentsList.resultList}"
                         rows="20">
                      <rich:column filterBy="#{assignment.type}" filterEvent="onkeyup" label="Type">
                          <f:facet name="header">Type</f:facet>
                          #{assignment.type}
                      </rich:column>
                      <rich:column filterBy="#{assignment.candidate.lastName}" filterEvent="onkeyup" label="Last Name">
                          <f:facet name="header">Last Name</f:facet>
                          <h:outputText  value="#{assignment.candidate.lastName}"/>
                      </rich:column>
                      <rich:column filterMethod="#{assignmentsList.filterByDate}" label="Class Date">
                                <f:facet name="header">
                                          <h:panelGroup>
                                                    <h:outputText value="Class Date" />
                                                    <br />
                                                    <rich:calendar value="#{assignmentsList.filterDate}" id="dateFilter" >
                                         <a4j:support ajaxSingle="true" event="onchanged" reRender="assignmentsTable, tableScroller"/>
                                                    </rich:calendar>
                                               </h:panelGroup>
                                </f:facet>
                                <h:outputText value="#{assignment.event.date}">
                                    <f:convertDateTime pattern="MMM-dd"/>
                                </h:outputText>
                      </rich:column>
                  </rich:extendedDataTable>
                <rich:datascroller id="tableScroller" align="left" for="assignmentsTable"/>
        • 1. Re: ? how to use rich:calendar to filter by date?
          ilya_shaikovsky

          could you please also show the filterByDate method?

           

          P.S. pictures looks similar(but seems I get the idea).

          • 2. Re: ? how to use rich:calendar to filter by date?
            jjfraney

            No problem.  Here is the code:

             

             

            private Date filterDate;
            public boolean filterByDate(Object current) {
                 if(filterDate == null) {
                      return true;
                 }
                 Assignment assignment = (Assignment)current;
                 return filterDate.equals(assignment.getEvent().getDate());
            }
            Note: The second header row is the default location for the extendedDataTables filter inputtext.  If I did not change the date column filter input from inputtext to rich:calendar, it too would show in that second row.  I don't know  how to reproduce the default location of the input field for when it must be anything else, here rich:calendar.
            • 3. Re: ? how to use rich:calendar to filter by date?
              ilya_shaikovsky

              sorry was not get the idea.. thought that the problem in sorted result.

               

              Now see it. And the reason is simple - opposite to table it not places the inputs for filtering into header facet but creates separate header. So that's why such problem appears. The component is community contributed so some extension points where missed while porting to RF base.

               

              But good news - the solution is usage of the special facet (just found out that it's still not documented so will create FAQ entry):

               

              <f:facet name="filterValueInput">
              <rich:calendar></rich:calendar>
              </f:facet>
              

               

              Then it should appear where you need.

              1 of 1 people found this helpful
              • 4. Re: ? how to use rich:calendar to filter by date?
                ilya_shaikovsky
                • 5. Re: ? how to use rich:calendar to filter by date?
                  jjfraney

                  Ilya,

                   

                  Thank you for your time.

                   

                  However, this did not work for me.  Here is the rich:column as I am using.  Can you check?  Is this what you intend?

                   

                   

                  <rich:column filterMethod="#{assignmentsList.filterByDate}" label="Class Date">
                     <f:facet name="header">Class Date</f:facet>
                     <f:facet name="filterValueInput">
                         <rich:calendar value="#{assignmentsList.filterDate}" id="dateFilter"/>
                     </f:facet>
                     <h:outputText value="#{assignment.event.date}">
                         <f:convertDateTime pattern="MMM-dd" />
                     </h:outputText>
                  </rich:column>

                   

                   

                  I think maybe it is a version issue?  I am using version Richfaces 3.3.1 GA.

                   

                  I have a further question.  Can you please say how you dug into the source code of richfaces to find this undocumented facet?

                   

                  Thanks,

                  John

                  • 6. Re: ? how to use rich:calendar to filter by date?
                    ilya_shaikovsky

                    1) please try with 3.3.3

                     

                    2) AbstractExtendedTableRenderer contains constant with facet name

                     

                        private static final String FILTER_INPUT_FACET_NAME = "filterValueInput";
                    • 7. Re: ? how to use rich:calendar to filter by date?
                      corte86

                      Hey, did u manage to solve this? I tried, but whenever i add filtermethod, my filter field disappear.....if so, can u post your column code, please?

                       

                      Many thanks....

                       

                             Giorgio

                      • 8. Re: ? how to use rich:calendar to filter by date?
                        franboragina

                        Hi,

                         

                        the facet name is "filter", not "filterValueInput", now I got the calendar filter in the right place.