XPages pager refresh issue

Question

I have a problem with a pager performing a partial refresh (since we have server side redirection rules, full refresh is not an option here). If I place the pager on the same page rather than in a custom control then it refresh the main panel. But if I place the pager in a custom control, then it only updates the repeat control, which means the pager control itself doesn't get refreshed. Here is a simple example to demonstrate the problem.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:panel id="mainPanel">
        <xc:ccPager pagerFor="repeat1" id="myPager" />
        <xp:repeat id="repeat1" rows="3" var="row">
            <xp:this.value><![CDATA[#{javascript:var cars = ["Saab", "Volvo", "BMW", "Saab", "Volvo", "BMW"];
return cars; }]]></xp:this.value>
            <xp:text escape="true" id="computedField1" value="#{row}">
            </xp:text>
        </xp:repeat>
    </xp:panel>
</xp:view>

And here is the code for the custom control:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:pager layout="Previous Group Next" partialRefresh="true"
        id="pager1" for="#{compositeData.pagerFor}" partialExecute="false">
    </xp:pager>
</xp:view>

Any tips would be welcome. In this case the pager is simple, but I have a more complex pager and a pagesizes control with 45 lines of source code, so I would prefer to create a re-useable custom component if possible at all.

UPDATE

My current pager custom control:

<div id="page-result" class="pagination pagination-small clearfix">
    <div class="col-lg-12 pagination clearfix">
        <div class="results form-inline left">
            <fieldset>
                <xp:pager id="pager1" alwaysCalculateLast="true"
                    for="#{compositeData.strPagerFor}" styleClass="pag-control"
                    partialRefresh="true" partialExecute="false">
                    <xp:pagerControl id="pagerControl1" type="FirstImage"
                        styleClass="firstPage" image="/PagerArrowhead2-L_d.png">
                    </xp:pagerControl>
                    <xp:pagerControl id="pagerControl2" type="PreviousImage"
                        styleClass="previousPage" image="/PagerArrowhead-L_d.png">
                    </xp:pagerControl>
                    <xp:pagerControl id="pagerControl5" type="Group"
                        currentStyleClass="active" styleClass="pages">
                    </xp:pagerControl>
                    <xp:pagerControl id="pagerControl3" type="NextImage"
                        styleClass="nextPage" image="/PagerArrowhead.png">
                    </xp:pagerControl>
                    <xp:pagerControl id="pagerControl4" type="LastImage"
                        styleClass="lastPage" image="/PagerArrowhead2.png">
                    </xp:pagerControl>
                </xp:pager>
                <label>
                    <xp:text escape="true" id="computedField1" value="#{compositeData.strLabelText}" />
                </label>
            </fieldset>
        </div>
        <div class="results form-inline">
            <fieldset>
                <label> Results per page: </label>
                <xe:pagerSizes id="pagerSizes1" for="#{compositeData.strPagerFor}"
                    sizes="7|15|25|50|all" text="{0}" styleClass="resultPage"
                    partialRefresh="true" partialExecute="false"
                    refreshId="#{compositeData.strRefreshPanel}" />
            </fieldset>
        </div>
    </div>
</div>

Did you consider placing the custom control into the header facet of the repeat control? It works in that way. — Serdar Basegmez
Thanks Serdar, in order to place it in the header and footer section of the repeat control, we will need to make major design changes, but it's a solution nonetheless, I will give it a go. — pipalia
Steve, that's the problem with the pager control, you cannot specify a panel to update! But as I described in my example, if you place the pager on the xpage it will update the whole page. — pipalia
Another solution is to implement a new component that inherits the repeat control (or its renderer). Just to grab paging event and do a self refresh. Maybe, even a custom renderer would be sufficient. Though, without actually seeing the code itself, it might be more difficult. — Serdar Basegmez

Paul Stephen Withers Paul Stephen Withers · Accepted Answer · 2014-09-08T22:17:14

I've hit this problem before. I think it's because the view container cannot find the pager when it's in a separate custom control. I presume it's using something like getComponent, which can't navigate down into custom controls, so it can't locate the pager to update it.

Can you extract the code for your pagesizes control into a Java dataObject / bean / util or dataContext / SSJS library? Then reference it with one line of SSJS or EL?

The other option would be to use a plugin and build a component that extends the repeat control and adds the pager to the relevant header?

Tim Tripcony gave a great demo of a quick and dirty way of doing it http://www.notesin9.com/2012/04/04/notesin9-064-global-custom-controls-fixed/

XPages pager refresh issue

UPDATE

1 Answers