Custom Pager in xpages

Question

I am trying to create a go to page counter combined with the pager and I found this interesting article:

http://www.mydominolab.com/2010/10/repeat-control-better-navigation.html

I have it working, but would like to change the page no. in the combo box when a page no. is clicked on in the pager (pager is doing a partial refresh at the moment). I thought of the defaultValue property at first of the combo box but that didn't work. Any ideas please?

Here is some example code:

<xp:panel styleClass="bodyText" id="dataPanel">
    <xp:panel style="font-size: 11px !important;">
        <xp:panel id="pagerArea" xp:key="headerPager">
            <div style="float:left">
                Page:&#160;
                <xp:comboBox id="cmbPages">
                    <xp:selectItems>
                        <xp:this.value><![CDATA[#{javascript:var rptControl:com.ibm.xsp.component.xp.XspDataIterator = getComponent("rptProduct");
if (rptControl == null) return [];

var total = vwProduct.getAllEntries().getCount(); //rptControl.getRowCount();
var rowsperpage = rptControl.getRows();
var totalpages = Math.ceil(total/rowsperpage);

var arr=[];
for (var i=1;i<=totalpages;i++) {
arr.push(@Text(i))
}
return arr}]]></xp:this.value>
                    </xp:selectItems>
                    <xp:eventHandler
                        event="onchange" submit="true" refreshMode="partial"
                        refreshId="dataPanel">
                        <xp:this.action><![CDATA[#{javascript:var pager:com.ibm.xsp.component.xp.XspPager = getComponent("pager1_Hidden");
pager.gotoPage(parseFloat(getComponent("cmbPages").getValue()) - 1);}]]></xp:this.action>
                    </xp:eventHandler>
                </xp:comboBox>
            </div>
            <xp:pager partialRefresh="true" id="pager1"
                for="rptProduct">
                <xp:pagerControl id="pagerControl1"
                    type="FirstImage">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl8"
                    type="Separator">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl2"
                    type="PreviousImage">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl6"
                    type="Separator">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl5"
                    type="Group">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl7"
                    type="Separator">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl3"
                    type="NextImage">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl9"
                    type="Separator">
                </xp:pagerControl>
                <xp:pagerControl id="pagerControl4"
                    type="LastImage">
                </xp:pagerControl>
            </xp:pager>
        </xp:panel>
        <xp:pager partialRefresh="true"
            id="pager1_Hidden" for="rptProduct" layout="Previous Group Next"
            style="display:none;" pageCount="1000">
        </xp:pager>
    </xp:panel>
    <div style="clear:both;"></div>
    <br />
    <xp:repeat id="rptProduct" rows="16" value="#{vwProduct}"
        var="productRow">
        <xp:panel styleClass="linkPanel" id="panel1">
            <xp:text escape="false" id="imgHTML">
                <xp:this.value><![CDATA[#{javascript:getImgURLForProduct(productRow.getDocument());}]]></xp:this.value>
            </xp:text>
            <xp:eventHandler event="onClientLoad"
                submit="true" refreshMode="norefresh"></xp:eventHandler></xp:panel>
    </xp:repeat>
    <xp:eventHandler event="onClientLoad" submit="true" refreshMode="norefresh"></xp:eventHandler>
</xp:panel>

Credits: Thanks to Bruce Lill for the hidden pager idea.