Friday, May 29, 2015

Calendar input in data table filter

Primefaces’s DataTable is such a nice component where it allows me to implement filter on the table without additional code. There is still limitation when filter on calendar as I need to type in exactly the same string as shown in cell. I received complaint from users mention that it should be restrict to only calendar input to avoid human typo error. This sound like a lot of code change to my existing code!
    <p:dataTable id="dataTable">
       ...
    
       <p:column id="listOn" 
                 headerText="Listing Date"
                 filterFunction="#{uploadFileController.filterByDate}"
                 filterBy="#{dataItem.listOn}">
          <p:outputLabel value="#{dataItem.listOn}">
             <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
          </p:outputLabel>
       </p:column>
    
    <p:dataTable>
The piece above shows the original code implementing default filter. But after some try and error it doesn’t seem that difficult. Here are the steps to accomplish the task.
  1. Attach the calendar into filter input. 
  2. Update data table view after a date is select from calendar input.
  3. Reset data table view after filter input value is wiped off.
    <p:dataTable id="dataTable" widgetVar=”theTable”>
    
       ...
    
       <p:column id="listOn" 
                 headerText="Listing Date"
                 filterFunction="#{theController.filterByDate}"
                 filterBy="#{dataItem.listOn}">
             <f:facet name="filter">
                <p:calendar id="cal1" pattern="yyyy-MM-dd">
                   <p:ajax event="dateSelect" oncomplete="PF('theTable').filter()" update="dataTable" />
                   <p:ajax event="change" execute="@this" oncomplete="PF('theTable').filter()" update="dataTable"/>
                </p:calendar>
             </f:facet>
          <p:outputLabel value="#{dataItem.listOn}">
             <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
          </p:outputLabel>
       </p:column>
    
    <p:dataTable>

No comments: