Search
Web Braintrove
Site Navigation
Home
Products
Tags
Levels
Dates
Authors
5 MOST RECENT
Create Shared Rules
Perform a Case-Insensitive String Comparison without Using Translate()
Force a Field Value to a Boolean Using Rules
Quickly Crop to a Shadow
Sum Repeating Time Values
5 MOST POPULAR
Pass Query String Parameters to an ASP.NET Xml Control
Access a Method in a Master Page with Code-Behind
Prevent Namespace Prefixes from Being Copied to the Output
Create Groups in a Drop-Down List Box
Change the Default Action of the Power Button on the Windows Vista Start Menu
5 MOST FORGOTTEN
Install Windows 7 Beta onto a Virtual Machine
Configure Lab Color Mode Defaults for Braintrove Articles
Permanently Change the Default Styles for New Word Documents
Enable Themes in Windows Server
Conditionally Display the Singular or Plural Form of Words
Books
Inside XSLT
XSLT 2.0 Web Development
Easy HTML-DB Oracle Application Express : Create Dynamic Web Pages with OAE
XSLT and XPath On The Edge, Unlimited Edition
Sams Teach Yourself XSLT in 21 Days
Magazines
Asp.net Professional
Visual Studio Magazine
Inside Visual Basic
Soa Web Services Journal
.net: The Internet Magazine
Microsoft MVP
This article has been viewed 626 times.

Display Lists in Columns Vertically Using One Cell per Column

Page 1 of 2
Written by Gregory Scot Collins
Tuesday, 19 September 2006, 7:22 AM
This article has been tested to work with the following products and versions. No guarantee of compatibility, with or without modification, is offered for products or versions other than those listed.
When outputting lists it is often helpful to display the list items in multiple columns. This allows more items to fit on a single row, thus taking fewer rows to display the list. The example code in this article allows for an arbitrary number of columns to be rendered for a given list. The number of columns can either be hard-coded or passed in to the transform as a parameter. For this example we will hard-code the number into a variable.
There are a minimum of four techniques you can use to render your list items in multiple columns. This article covers displaying items top-down left-to-right with items combined in a single table cell per column. Links to three other articles, demonstrating different techniques, can be found in the See Also box.

Create the Items.xml file

We need a simple XML file to transform that contains our list of items that we can output in multiple columns. Copy the contents of Listing 1 into a text editor, and then save the file as Items.xml.

Create the Columns-Vertical-Combined.xsl file

Now we need a transform to output our list items in an arbitrary number of columns. You will find the number of columns hard-coded to seven in the COLS variable. Feel free to adjust this number to whatever you choose; or, if you prefer, you can change it into a parameter, and then pass in the value when applying the transform.
Copy the contents of Listing 2 into a text editor, and then save the file as Columns-Vertical-Combined.xsl. Be sure to save it in the same folder as the Items.xml file.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:strip-space elements="*"/>
<xsl:output method="html" indent="no"/>
 
<xsl:variable name="COLS" select="7"/>
<xsl:variable name="ROWS" select="ceiling(count(/Items/Item) div $COLS)"/>
 
<xsl:template match="/Items">
    <table border="1" cellpadding="5">
        <tr>
            <xsl:call-template name="Column"/>
        </tr>
    </table>
</xsl:template>
 
<xsl:template name="Column">
    <xsl:param name="COL" select="0"/>
    <xsl:variable name="START" select="$COL * $ROWS + 1"/>
    <xsl:variable name="END" select="($COL + 1) * $ROWS"/>
    <xsl:if test="$COL &lt; $COLS">
        <td valign="top" width="50">
            <xsl:choose>
                <xsl:when test="Item[position() = $START]">
                    <xsl:apply-templates select="Item[position() &gt;= $START and position() &lt;= $END]"/>
                </xsl:when>
                <xsl:otherwise>
                    <i>empty</i>
                </xsl:otherwise>
            </xsl:choose>
        </td>
        <xsl:call-template name="Column">
            <xsl:with-param name="COL" select="number($COL) + 1"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>
 
<xsl:template match="Item">
    <div>
        <xsl:value-of select="."/>
    </div>
</xsl:template>
 
</xsl:stylesheet>
Listing 2. The Columns-Vertical-Combined.xsl file.
Bookmark this Article
StumbleUpon  Stumble It!
Digg  Digg It!
del.icio.us  del.icio.us
List of Figures
Listing 1 - The Items.xml file.
Listing 2 - The Columns-Vertical-Combined.xsl file.
Screenshot 1 - The list of items rendered in seven columns.
See Also
Display Lists in Columns Vertically Using Individual Cells
Display Lists in Columns Horizontally Using One Cell per Column
Display Lists in Columns Horizontally Using Individual Cells
Article Tags
Great Deals
TigerDirect Exclusive Deals, Limited Time Offers, Act Now And Save!
Find all current special offers on Adobe products.
Try SugarSync Free!
Join WebHost4Life.com
TigerDirect
Computers4SURE (4SURE.com - An Office Depot Co.)
Copyright © 2006-2010 Braintrove. All rights reserved. Braintrove, braintrove.com, and the Braintrove logo are trademarks of Gregory Scot Collins in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Any rights not expressly granted herein are reserved.