XPages: Scrollable viewPanel - can it be done?

HCL Domino Domino Forum
1

On a viewPanel, I’d like to have the view data contained within a vertical scrollable region. I’ve been able to attach a scroll bar by wrapping the viewPanel in an xp:panel with a style of “overflow:auto” but I can’t seem to get the View Column Headers to be outside of the scrolling region. The xp:viewColumnHeader tags are embedded/tied to the xp:viewColumn tags & if you try to separate them out, the view doesn’t display at all. I also tried embedding the View Column Headers in the pager area à la the xp-key=“headerPager” route, using raw HTML but the resulting headers were very tiny and didn’t line up with the columns. Am I doomed to use pagers?

Maybe I’m not approaching this correctly. Has anyone been able to do this? Since these are categorized views, I haven’t wanted to go down the “Use a Repeat control” route.

Thanks for any help.

My code:

<xp:panel id="viewDiv" styleClass="divScrollAuto"

	style="overflow-x:hidden">

	<xp:viewPanel rows="0" id="viewPanel1" viewStyle="width:100%"

		pageName="/xpProduct.xsp" partialRefresh="true" value="#{view1}">





		<xp:viewColumn columnName="Operation Division"

			id="viewColumn1"

			style="white-space:nowrap;font-weight:bold;color:rgb(0,64,0);width:100.0px"

			collapsedImage="/collapseTwistie.gif" disableTheme="true"

			indentResponses="true" expandedImage="/expandTwistie.gif">

			<xp:viewColumnHeader id="viewColumnHeader1"

				styleClass="viewColHeader textColHeader"

				value="Operation Division">

			</xp:viewColumnHeader>

		</xp:viewColumn>



		<xp:viewColumn columnName="Status" id="viewColumn2"

			style="white-space:nowrap;font-weight:bold;color:rgb(128,64,64);width:50.0px"

			expandedImage="/expandTwistie.gif"

			collapsedImage="/collapseTwistie.gif" disableTheme="true"

			indentResponses="true">

			<xp:viewColumnHeader value="Status"

				id="viewColumnHeader2" styleClass="viewColHeader textColHeader">

			</xp:viewColumnHeader>

		</xp:viewColumn>

(etc. … )

		<xp:viewColumn columnName="Project Leader" id="viewColumn7"

			style="width:140px">

			<xp:viewColumnHeader value="Project Leader"

				id="viewColumnHeader7" styleClass="viewColHeader textColHeader">

			</xp:viewColumnHeader>

		</xp:viewColumn>

		<xp:viewColumn id="viewColumn8" columnName="Project">

			<xp:viewColumnHeader id="viewColumnHeader8"

				value="Project" styleClass="viewColHeader textColHeader">

			</xp:viewColumnHeader>

		</xp:viewColumn>



	</xp:viewPanel>

</xp:panel>
2

Subject: Any progress?

Hi there,

did you ever solve your problem above?

I am in the same fix at the moment, and don’t have the option of repeat controls.

Regards,

Tina

3

Subject: No progress I’m afraid …

Tina, as you can see, no suggestions offered & couldn’t find anything on the web either. Resorted to using the pager – if you change the pager to do partial refreshes, it’s not SO bad – you at least don’t get thrown back to page 1 then … still not what I’d like; scrolling is so much more friendly. If I ever figure out how to do it, I’ll post my solution.

4

Subject: Better late than never

XPages Extensions Library claims to have Interactive views that are scrollable (iNotes or DoJo)