The Pager Add Rows control is simple to add, but it provides a great feature for navigation in your Data Views. In this post, I’ll show how to use it.
Data View Series
Pager Add Rows Control
The Pager Add Rows control provides a different way to navigate the data in your Data View. You’ve probably seen pagers in a lot of view controls (and that’s an option here as well), but the Pager Add Rows control provides a more modern interface.
When the user gets to the end of the number of rows shown on the page, there’s a link to add more. The user can continue to add more rows until the end of the data set is reached, at which point the link will be disabled (but still visible).
This is critical in a mobile application, but it can also be very useful in full browser applications as well. It allows you to limit the number of entries loaded initially, but still allow the user to continue viewing more data as needed.
Adding the Control
The Pager Add Rows control can be found in the Extension Library section of the Controls view.
Just drag and drop it into a facet of the Data View control. It does not need to be bound specifically — it will automatically work when added to a fact.
Properties
You can use the text property to change the text of the link that adds more rows.
There are several properties that allow you to adjust partial refresh and partial execution settings, but none of them are necessary for the control to work. I tested it with the default settings (all of those properties blank) and it appeared to only partially execute and partially refresh the data view itself. But there are exceptions to this rule, noted below.
When you click the Show more… link, it will display an additional set of rows. By default, the number of rows will be the same as the number of rows shown in the Data View (per the rows property). You can change this by setting the rowCount property of the Pager Add Rows control. However, it also seems to require the refreshPage property set to true or a custom setting does not take effect, regardless of whether you hard-code or compute the rowCount.
Enhancements
One minor enhancement is to hide the Pager Add Rows control if there aren’t more documents in the view than can be displayed, based on the Data View’s rows property. This code on the rendered property of the Pager Add Rows control will do the trick:
var dv = getComponent('dataView1');
return (dv.getRowCount() > dv.getRows());
It reads the rows property of the Data View, so it can be used as is on any Pager Add Rows control.
This will work on the initial page display without the refreshPage property being set. However, if that property is set, it will also hide the control when the end of the data set is reached.
It’s interesting to note that the getRows() method of the Data View always seems to return a number slightly higher than the number currently being displayed. That seems like good design for performance.
Another enhancement you can provide is to give the user a way to define how many rows the pager will add. If you compute the rowCount property to read a value from a combobox on the page, you can make this work. The combobox’s onchange event must trigger a partial refresh on the Pager Add Rows control (to update the computed row count) and the refreshPage property of the Pager Add Rows control must be set to true.
Here’s the source code for a combobox and Pager Add Rows control where this works (and also includes the code to hide the control when there are no more rows):
<xp:comboBox id="cbNumRows" xp:key="pagerBottomLeft" defaultValue="10">
<xp:selectItem itemLabel="10"></xp:selectItem>
<xp:selectItem itemLabel="25"></xp:selectItem>
<xp:selectItem itemLabel="50"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="pagerAddRows1">
</xp:eventHandler>
</xp:comboBox>
<xe:pagerAddRows id="pagerAddRows1" xp:key="pagerBottom" refreshPage="true">
<xe:this.rendered><![CDATA[#{javascript:var dv = getComponent('dataView1');
return (dv.getRowCount() > dv.getRows());}]]>
</xe:this.rendered>
<xe:this.rowCount><![CDATA[#{javascript:print ('row count: ' + parseInt(getComponent('cbNumRows').getValue()));
return parseInt(getComponent('cbNumRows').getValue());}]]>
</xe:this.rowCount>
</xe:pagerAddRows>
Up Next
In the next post, I’ll show how to use the Pager Save State control to allow users to restore the previous state of expanding/collapsing when returning to the view later in the session.
