Display Lists in Columns Vertically Using Individual Cells

Written by Gregory Scot Collins

Tuesday, 19 September 2006, 7:21 AM

The key component of this transform is the COLS variable; change its value to adjust the number of columns output. The calculated ROWS variable identifies how many rows are required to display our list items in the specified number of columns. The calculated CELLS variable identifies the total number of cells required to render a complete table (that will often be more than the number of items in the list).

The root template sets up the outer table, and then calls a named template to output the individual items into the table cells. We use a named template here because we want to render a complete table, including empty cells, and we cannot do that via xsl:apply-templates without more complicated code. The named template has a single parameter, NEXT, that is incremented from one to the value of the CELLS variable. You might have noticed the attribute select="1" on the parameter definition; this provides a default value in case the parameter is not passed in to the template. You might have also noticed that we don't pass this parameter in to the template the first time that we call it; thus NEXT defaults to the value 1.

Because table cells are rendered horizontally, and we want to effectively render them vertically, we use the equation for variable POS to identify which list item to display next. The calculated position value might not exist (i.e. is greater than the total number of list items), in which case we render an empty cell. When we reach the maximum number of columns for a single row we must create a new row. As we cannot close and open a new table row traditionally (using the tag combination </tr><tr>) without receiving a tag mismatch error, we output the following to create a new table row, which is processed as text by the XSLT processor but rendered as tags in the final output:

Finally, we call the same named template again, passing in an incremented NEXT parameter. This continues until we have completed our table.

Applying the transform to our XML results in the following output that correctly renders the list of items vertically in multiple columns with each item in an individual table cell: