CODEWITHSUNDEEP
jsfprimefacesjsf-2.2
Tiny
Tiny

Reputation: 27889

Using the page event with p:dataList in PrimeFaces

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?

Upvotes: 2

Views: 2309

Answers (2)

Tiny
Tiny

Reputation: 27889

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).

enter image description here

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).

Upvotes: 0

Hatem Alimam
Hatem Alimam

Reputation: 10048

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');
   }
 }

Upvotes: 3

Related Questions