pagerDetail - Pager Show/Hide Details

Shows and hides detail areas of an iterator control.

Category

Extension Library

Syntax

<xe:pagerDetail attributes>content</xe:pagerDetail>
Table 1. Essential properties
Property Description
id Defaults to pagerDetail1, pagerDetail2, and so on.
for Identifies the iterator control. Not needed if this control is a facet of the iterator control.
Table 2. All properties
Category Properties
accessibility ariaLabel
basics binding, for, hideText, id, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType, showText
styling disableTheme, style, styleClass, themeId

Usage

In an iterator control, you can specify a detail area as a facet control whose key property is detail.

The user clicks the Pager Show/Hide Details control to toggle display of a detail area.

Examples

Here a data view contains a detail area and a Pager Show/Hide Details control to toggle its display.
<xe:dataView id="dataView1" columnTitles="true"
collapsibleDetail="true" collapsibleRows="true" expandedDetail="true" var="entry">
	<xp:this.facets>
		<xp:panel xp:key="detail">
			<xp:label value="Number: " id="label1"></xp:label>
			<xp:text escape="true" id="computedField1">
				<xp:this.value>
					<![CDATA[#{javascript:return entry.getColumnValue("number")}]]>
				</xp:this.value>
			</xp:text>
		</xp:panel>
		<xe:pagerDetail id="pagerDetail1"
			xp:key="pagerBottomLeft">
		</xe:pagerDetail>
	</xp:this.facets>
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"
			expandLevel="2">
		</xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject"
			columnTitle="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>