Sorting the datatable using calendar component of primefaces

0
votes

I'm using jsf 2.2 Primefaces 6.0 and i'm trying to sort the datatable using calendar component of primefaces. The issue that when i start filtering the datatable using a specific date all values of datatable will disappear instead of showing the right values.

Here a graphical description through the two pictures: Data table without filtering:

data table without filtering

Datatable after filtering:

datatable after filtering

Here the xhtml code:

<p:dataTable value="#{demandeBean.allDemandes}" var="a" id="t1"
                sortMode="multiple" widgetVar="tt" editable="true" editMode="cell"
                selectionMode="single" rowKey="#{a.id}"
                emptyMessage="Aucune demande" rows="10" paginator="true"
                paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="10,15,25" draggableColumns="true"
                scrollable="true" scrollHeight="250" paginatorPosition="bottom">
                <p:ajax event="rowSelect" listener="#{demandeBean.onRowSelect}"
                    oncomplete="PF('d2').show()" update=":form:d2" />

                <p:ajax event="cellEdit" listener="#{demandeBean.onCellEdit}"
                    update=":form:t1" />

                <p:column headerText="Date dépot" sortBy="#{a.dateDeDepot}" filterBy="#{a.dateDeDepot}">
                    <f:facet name="filter">
            <p:calendar id="cal1" pattern="dd/MM/yyyy">
               <p:ajax event="dateSelect" oncomplete="PF('tt').filter()" update="t1" />
               <p:ajax event="change" execute="@this" oncomplete="PF('tt').filter()" update="t1"/>
            </p:calendar>
         </f:facet>
                    <h:outputText value="#{a.dateDeDepot}">
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"
                            timeZone="GMT+1:00" />
                    </h:outputText>
                </p:column>
2
primefacescalendarjsf-2.2
Don't update the table on the ajax and especially after .filter(), the filter will take care of the update, not sure if this will solve the issue, but it would definitely help, so remove that in the ajax events of the calendar update="t1" - Hatem Alimam

2 Answers

0
votes

add in your column 

filterMatchMode="contains"

so:

<p:column headerText="Date dépot" sortBy="#{a.dateDeDepot}" filterBy="#{a.dateDeDepot}" filterMatchMode="contains">
0
votes
<p:column headerText="Date dépot" sortBy="#{a.dateDeDepot}" filterBy="#{a.dateDeDepot}" filterFunction="#{a.filterByDate}">
   <f:facet name="filter">
      <h:inputHidden id="filter" />
   </f:facet>
   <f:facet name="header">
        <p:calendar id="cal1" pattern="dd/MM/yyyy">
           <p:ajax event="dateSelect" oncomplete="PF('tt').filter()" update="t1" />
           <p:ajax event="change" execute="@this" oncomplete="PF('tt').filter()" update="t1"/>
        </p:calendar>
   </f:facet>
    <h:outputText value="#{a.dateDeDepot}">
         <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"
                        timeZone="GMT+1:00" />
         </h:outputText>
</p:column>

and the function in your bean class:

public boolean filterByDate(Object value, Object filter, Locale locale) {

    String filterText = (filter == null) ? null : filter.toString().trim();
    if (filterText == null || filterText.isEmpty()) {
        return true;
    }
    if (value == null) {
        return false;
    }

    DateFormat df = SimpleDateFormat.getDateInstance(SimpleDateFormat.MEDIUM);

    Date filterDate = (Date) value;
    Date dateFrom;
    Date dateTo;
    try {
        String fromPart = filterText.substring(0, filterText.indexOf("-"));
        String toPart = filterText.substring(filterText.indexOf("-") + 1);
        dateFrom = fromPart.isEmpty() ? null : df.parse(fromPart);
        dateTo = toPart.isEmpty() ? null : df.parse(toPart);
    } catch (ParseException pe) {
        LOG.log(Level.SEVERE, "unable to parse date: " + filterText, pe);
        return false;
    } catch (Exception e) {
        LOG.log("another exception");
        return false;
    }

    return (dateFrom == null || filterDate.after(dateFrom)) && (dateTo == null || filterDate.before(dateTo));
}

}

you can also read this answer: Primefaces datatable date range filter with filterFunction