Transforming xml into a multicolumn html table - asp.net

Question

I would like to have the following XML:
<?xml version="1.0" standalone="yes"?>
<NewDataSet>
<categories>
<name>Badges & Holders</name>
<value>1000111</value>
</categories>
<categories>
<name>Clips, Tacks & Rubber Bands</name>
<value>1000113</value>
</categories>
<categories>
<name>Clocks</name>
<value>1000114</value>
</categories>
<categories>
<name>Indexing Flags & Tabs</name>
<value>1000115</value>
</categories>
<categories>
<name>Magnification</name>
<value>1000116</value>
</categories>
<categories>
<name>Pad Holders</name>
<value>1000117</value>
</categories>
<categories>
<name>Paper Punch Accessories</name>
<value>1000118</value>
</categories>
<categories>
<name>Paper Punches</name>
<value>1000119</value>
</categories>
<categories>
<name>Scissors, Rulers & Paper Trimmers</name>
<value>1000120</value>
</categories>
<categories>
<name>Signs & Nameplates</name>
<value>1000121</value>
</categories>
<categories>
<name>Stamps & Pads Accessories</name>
<value>1000122</value>
</categories>
<categories>
<name>Stapler Accessories</name>
<value>1000123</value>
</categories>
<categories>
<name>Staplers</name>
<value>1000124</value>
</categories>
<categories>
<name>Tags & Tickets</name>
<value>1000125</value>
</categories>
<categories>
<name>Tape, Glue & Adhesives</name>
<value>1000126</value>
</categories>
</NewDataSet>
And turn it into HTML (table) like this:
<table>
<tr>
<td>
<div>
<img src="Path/" + {value} + ".jpg"></img>
</div>
<div>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name"/>
</span>
</div>
</td>
</tr>
</table>
Here is the kicker, though. I only need it to have 5 columns of TD's and then start over with a new TR after that.. all the way down. If it has, say, 12 items in the XML, then I need it to go ahead and have 15 TD's (I presume) so that the table is a nice square.
In the future we will have a "PictureURL" or something like that in this XML for each "categories" item just like the name and value. I could get that working later on my own, I bet, if I can get this working now.
Thank you very much for any help! The XSLT syntax has me still confused after a few days of trying this and googling around.
Here is what I have been trying to make work and could not pull it off:
<table>
<xsl:for-each select="categories[position() mod 5 = 1]">
<xsl:variable name="pos" select="position() - 1" />
<tr>
<td >
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5)]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 2]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 2]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 3]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 3]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 4]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 4]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 5]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 5]"/>
</span>
</td>
</tr>
</xsl:for-each>
</table>
This is how I tried to integrate JLRishe's answer into my existing XSLT:
<!--================-->
<!-- Categories -->
<!--================-->
<xsl:template name="WriteCategories">
<xsl:if test="categories">
<div>
<!-- set the class, if browsing it's a larger font -->
<xsl:choose>
<xsl:when test="$pBrowse='True'">
<xsl:attribute name="class">critGroup lg</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">critGroup</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="numCols" select="5" />
<xsl:template match="/*">
<table>
<xsl:apply-templates select="categories[position() mod $numCols = 1]"
mode="row" />
</table>
</xsl:template>
<xsl:template match="categories" mode="row">
<tr>
<xsl:variable name="thisRowItems"
select=". | following-sibling::categories[position() < $numCols]" />
<xsl:apply-templates select="$thisRowItems" />
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$numCols - count($thisRowItems)" />
</xsl:call-template>
</tr>
</xsl:template>
<xsl:template match="categories">
<td>
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" />
</span>
</td>
</xsl:template>
<xsl:template name="addCells">
<xsl:param name="count" />
<xsl:if test="$count > 0">
<td></td>
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$count - 1" />
</xsl:call-template>
</xsl:if>
</xsl:template>
<div>
<!-- if not browsing, write expandable area if there are more than 5 items -->
<xsl:if test="$pBrowse='False' and count(categories)>5">
<div id="divCritHdnMore_Category" class="moreHidden">
<xsl:for-each select="categories">
<xsl:if test="position()>5">
<div>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" disable-output-escaping="yes" />
</span>
<xsl:value-of select="concat(' (', count, ')')" />
</div>
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</div>
<!-- more link -->
<xsl:if test="$pBrowse='False' and count(categories)>5">
<div class="moreLink">
<span id="spnCritMore_Category" onclick="CriteriaMore('Category')">More . . .</span>
</div>
</xsl:if>
</div>
</xsl:if>
</xsl:template>

Answer 1

This is how you can do table row grouping. I don't think having the right number of <td>s in the last row is strictly necessary, but I've added that capability too:
Add this to your WriteCategories template in the place where you want the table to be:
<table>
<xsl:apply-templates select="categories[position() mod $numCols = 1]"
mode="row" />
</table>
And add this outside of any other templates:
<xsl:variable name="numCols" select="5" />
<xsl:template match="categories" mode="row">
<tr>
<xsl:variable name="thisRowItems"
select=". | following-sibling::categories
[position() < $numCols]" />
<xsl:apply-templates select="$thisRowItems" />
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$numCols - count($thisRowItems)" />
</xsl:call-template>
</tr>
</xsl:template>
<xsl:template match="categories">
<td>
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" />
</span>
</td>
</xsl:template>
<xsl:template name="addCells">
<xsl:param name="count" />
<xsl:if test="$count > 0">
<td></td>
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$count - 1" />
</xsl:call-template>
</xsl:if>
</xsl:template>
When run on your sample input with the last 3 categories removed to make 12 items, the result is:
<table>
<tr>
<td>
Badges & Holders
1000111
<span onclick="Critia(this, '1000111')">Badges & Holders</span></td>
<td>
Clips, Tacks & Rubber Bands
1000113
<span onclick="Critia(this, '1000113')">Clips, Tacks & Rubber Bands</span></td>
<td>
Clocks
1000114
<span onclick="Critia(this, '1000114')">Clocks</span></td>
<td>
Indexing Flags & Tabs
1000115
<span onclick="Critia(this, '1000115')">Indexing Flags & Tabs</span></td>
<td>
Magnification
1000116
<span onclick="Critia(this, '1000116')">Magnification</span></td>
</tr>
<tr>
<td>
Pad Holders
1000117
<span onclick="Critia(this, '1000117')">Pad Holders</span></td>
<td>
Paper Punch Accessories
1000118
<span onclick="Critia(this, '1000118')">Paper Punch Accessories</span></td>
<td>
Paper Punches
1000119
<span onclick="Critia(this, '1000119')">Paper Punches</span></td>
<td>
Scissors, Rulers & Paper Trimmers
1000120
<span onclick="Critia(this, '1000120')">Scissors, Rulers & Paper Trimmers</span></td>
<td>
Signs & Nameplates
1000121
<span onclick="Critia(this, '1000121')">Signs & Nameplates</span></td>
</tr>
<tr>
<td>
Stamps & Pads Accessories
1000122
<span onclick="Critia(this, '1000122')">Stamps & Pads Accessories</span></td>
<td>
Stapler Accessories
1000123
<span onclick="Critia(this, '1000123')">Stapler Accessories</span></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>