Using the page event with p:dataList in PrimeFaces

Question

Does a <p:dataList> support the page event? I'm trying to use the page event in the following way (blocking a <p:dataList> using <pe:blockUI> while going through pages).

<pe:blockUI target="dataList" widgetVar="blockDataListUIWidget">
    <h:panelGrid columns="2">
        <h:graphicImage library="default" name="images/ajax-loader1.gif"/>
        <h:outputText value="Fetching..." class="block-ui-text"/>
    </h:panelGrid>
</pe:blockUI>

<p:dataList id="dataList"
            var="orderRow"
            value="#{orderDetailsManagedBean}"
            first="0"
            rows="1"
            paginator="true"
            paginatorAlwaysVisible="false"
            type="definition" lazy="true"
            emptyMessage="Message">

    <p:ajax event="page"
            onstart="PF('blockDataListUIWidget').block()" 
            oncomplete="PF('blockDataListUIWidget').unblock()"
            process="@this"
            update="@none"/>

            ...

</p:dataList>

This does not work anymore. The page just remains blank with no errors. Events don't seem to be supported by <p:dataList>.

Can this scenario be simulated in <p:dataList> anyway?

Answer 1

As I have seen from the source code that page event is not supported by dataList, on the other hand dataGrid supports it.

The solution would be monkey patching as we don't have control on rewriting the original JS file, you can hook an event before the handling of the pagination and after it, all by javascript.

Here's an example: assuming your dataList widgetVar is dataListWV

//making sure the widgetVar is ready to be used    
setTimeout(dataListPaginationExtraEvents, 1000);    

function dataListPaginationExtraEvents() {
   var odlHandlePagination = PF('dataListWV').handlePagination;

   PF('dataListWV').handlePagination = function(newState) {
      //before
      console.log('start fetch');
      //calling original pagination 
      odlHandlePagination.apply(this, [newState]);
      //after
      console.log('end fetch');
   }
 }

Answer 2

As of PrimeFaces 5.3 final (community release), the page event is supported in <p:dataList>

The following picture is taken from the PrimeFaces user guide 5.3 (page 146).

There is no mention of Ajax behavior events in previous guides.

The page event as mentioned in the question works flawlessly in PrimeFaces 5.3 final (community release).

• https://github.com/primefaces/primefaces/issues/687
• https://github.com/primefaces/primefaces/commit/52b6c22eb37eca62a979d204f2030c82b795d472#diff-b651ae3f3b6abb0cf6945a9c589fa68aR98