Cloud

Multiple Data Items Per ROW Using XSLT

I had to come up with some XSL for a client to display multiple bios and and pictures per data row. I did a bit of searching and put together my XSL based on some stuff I had read. There was no real example like I am about to show you. Here is the scenario…the client wanted the information stored in a list within SharePoint and wanted to display it in the following manner:
Image 1 Name
Title
Bio Link
Image 2 Name
Title
Bio Link
Image 3 Name
Title
Bio Link
Image 4 Name
Title
Bio Link
Image 5 Name
Title
Bio Link
Image 6 Name
Title
Bio Link
Image 7 Name
Title
Bio Link
Image 8 Name
Title
Bio Link
Once I figure out the solution it seems easy. Here a form of the XSL I used for this. The key is the mod operator. This will determine the number of columns. For this example it is set to 2. I used DIV tags in this case; however it does not matter what the container is. This blog still applies to any side by side data.
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:for-each select="$Rows">
<xsl:if test="position()mod 2 = 1">
<div class="styleclass">
<xsl:call-template name="dvt_1.rowview"/>
</div>
</xsl:if>
</xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<DIV class="containerforitem1">
//fill the container for the first item
</DIV>
<xsl:choose>
<xsl:when test="position() != last()">
<DIV class="containerforitem2">
//fill the second container
</DIV>
</xsl:when>
<xsl:otherwise>
<DIV class="contactitem">
//make the second container empty if it has passed the last item
</DIV>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
If your mod operator is 3 then you will have more code to accomodate the third column…and so on.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Follow Us
TwitterLinkedinFacebookYoutubeInstagram