XPages Data Views – Part 9: Multi-Column Layout

Another great feature of the Data View control is its ability to easily provide a multiple-column layout. In this post, I’ll show you can use that property to let the user dynamically determine the number of columns to display.

Data View Series

Multiple Column Layout

If your data lends itself to a multiple-column layout (e.g. a business card-style display), you can easily achieve this by setting the multiColumnCount property of the Data View. (All Properties > format > multiColumnCount)

DataView9_A

You can still expand/collapse detail sections when multiple columns are used.

Giving the user control

Taking this a step further, you can compute the property and give the user the ability to adjust the display as desired.

The steps are virtually the same as shown in the last post on sorting and filtering.

1) Put a combobox on the page with options for the number of columns to display. (You can event put it in one of the pager top facets of the data view to tie it in.)
2) Bind the combobox to a sessionScope variable
3) Set the onchange event of the combobox to trigger a partial refresh on the data view
4) Compute the Sort column property to return that sessionScope variable

Advertisements

2 responses to “XPages Data Views – Part 9: Multi-Column Layout”

  1. bryanschmiedeler says :

    Brad,

    I have used your excellent Data View tutorials to get a great Data View page going. There are two things I would like to do, but can’t.

    1. I put a panel and then a table in the Summary Facet with some computed fields. This worked great, as I got a very nice layout. I wanted to have a header row, but the only way I could find to make it work was to put the header row in the facet middle, which is above my pager controls. Looks kind of weird. Any way you know to get the headers where I want them.

    2. Finally the rows in the table look a little odd, in that there are too many lines. It is hard to describe. I have one detail field that is filled in. I can’t post a picture in here, I wish I could

    Again, if you have an idea great. These articles have been very helpful.

    Bryan

    • Brad Balassaitis says :

      1) Are you using a data table? What happens to the header row?

      2) I’ve seen that duplicate top border when customizing the summary. Add a style class to the table that’s added and use CSS to set .yourTableClassName {border:none;} In other cases, I’ve had to target a different element and set border-top:0px.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: