?
Solved

Multiple Columns in XSLT

Posted on 2007-10-12
8
Medium Priority
?
775 Views
Last Modified: 2013-11-18
I am trying to figure out how to produce 3 columns wide and however many rows that are needed until the end of the data is reached. Right now it is producing a single column but I would like the results to span 3 columns wide. Any help? Here's my XSL.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<div align="center"><img src="../PublishingImages/Birthday_banner.jpg" align="top"></img><br /><br />
<table width="100%" bgcolor="#ffffff">
<tr>
        <!-- Need to repeat this column three times across --><td align="center">
<NewDataSet>
      <Data>
      <xsl:for-each select="NewDataSet/Data">
        
      <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
              <tr>
                <td valign="top">
                        <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                                <tr>
                                  <td valign="top"><xsl:text disable-output-escaping="yes"><![CDATA[ <img src="]]></xsl:text><xsl:value-of select="EmpImage"/><xsl:text disable-output-escaping="yes"><![CDATA["></img> ]]></xsl:text><br /></td>
                                    <td width="20" valign="top"></td>
                                    <td valign="top" nowrap="nowrap"><p><font face="Arial, Helvetica, sans-serif" color="#8A9B2B"><strong><font size="3"><xsl:value-of select="FirstName"/><xsl:text disable-output-escaping="yes"><![CDATA[ ]]></xsl:text><xsl:value-of select="LastName"/></font><br /><font face="Arial, Helvetica, sans-serif" color="#000000"><xsl:value-of select="Birthdate"/></font></strong></font><br />
                                    <br />
                                    <font size="2">Team: <xsl:value-of select="TeamName"/><br />
                                    Shift: <xsl:value-of select="Shift"/></font></p></td>
                                </tr>
                        </table>
                  </td>
            </tr>
            </table><br /><br />
                  </xsl:for-each>
                  </Data>
                  </NewDataSet>
                  </td>
            </tr>
            </table>
                  </div>
</xsl:template>
</xsl:stylesheet>
0
Comment
Question by:Chris24
  • 5
  • 3
8 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 20066441
In order to get you started
Instead of catching all the cell elements, you need to catch those with a position() mod 3 = 1
(so you take every 3rd cell)
you use this cell to create the row and add to that row the following-sibling [1] and [2]

I will translate that into code now
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 2000 total points
ID: 20066567
Here is the new stylesheet

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <div align="center"><img src="../PublishingImages/Birthday_banner.jpg" align="top"></img><br /><br />
            <table width="100%" bgcolor="#ffffff">
                <xsl:for-each select="NewDataSet/Data[position() mod 3 = 1]">
                    <tr>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="." />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[2]" />
                            </xsl:call-template>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </xsl:template>
   
    <xsl:template name="processCell">
        <xsl:param name="thisData"/>
        <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                        <tr>
                            <td valign="top"><img src="{$thisData/EmpImage}"></img><br /></td>
                            <td width="20" valign="top"></td>
                            <td valign="top" nowrap="nowrap"><p><font face="Arial, Helvetica, sans-serif" color="#8A9B2B">
                                <strong><font size="3">
                                    <xsl:value-of select="$thisData/FirstName"/>
                                    <xsl:text> </xsl:text><xsl:value-of select="$thisData/LastName"/></font>
                                    <br /><font face="Arial, Helvetica, sans-serif" color="#000000"><xsl:value-of select="$thisData/Birthdate"/></font></strong></font><br />
                                <br />
                                <font size="2">Team: <xsl:value-of select="$thisData/TeamName"/><br />
                                    Shift: <xsl:value-of select="$thisData/Shift"/></font></p></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </xsl:template>
</xsl:stylesheet>
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 20066598
I have put the individual cell processing in a named template
(In the mean time I got rid of the disable-output-escaping constructs that are simply awfull,
by using {} attribute value templates in the attribute values)

You could make this even nicer by having an inner for-each to get rid of the three cell repetitions,
but try this first
Some XML for me to test would have been nice, but I think I got it

cheers

Geert
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Chris24
ID: 20066904
Wow! That is great! Worked first time. Thank you VERY much!!
0
 

Author Comment

by:Chris24
ID: 20066932
Even though the space between First and Last name is not showing....
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 20067361
you are welcome

the space is a browser issue
if you replace the space with &#160; (the non breaking space)
the space will show

cheers

Geert
0
 

Author Comment

by:Chris24
ID: 20081476
A small issue. What if the final row has only one more set of data? It adds null data to the 2nd and 3rd cell in the last row. In this current project, it is an employee table sorted by last name. The very last person in the list (begins with Z of course) falls into the very last row in cell #1. Cell #2 and #3 display my label text but no data because there is no more data to place.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
<style type="text/css" media="screen">
@import url("../Source%20XML%20Files/Files/stone.css");
</style>
        <div align="center"><br />
            <table width="100%" bgcolor="#ffffff">
                <xsl:for-each select="NewDataSet/Data[position() mod 3 = 1]">
                    <tr>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="." />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[2]" />
                            </xsl:call-template>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </xsl:template>
   
    <xsl:template name="processCell">
        <xsl:param name="thisData"/>
        <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                        <tr>
                            <td valign="top"><img src="{$thisData/EmpImage}"></img><br /></td>
                            <td width="20" valign="top"></td>
                            <td valign="top" nowrap="nowrap" class="cellText"><p>
                                <strong>
                                    <span class="tblHeadmed"><font color="#8A9B2B"><xsl:value-of select="$thisData/FirstName"/>&#160;<xsl:value-of select="$thisData/LastName"/></font></span>
                                    <br />
                                                      <font color="#000000">Birthday: <xsl:value-of select="$thisData/Birthdate"/><br />Hire Date: <xsl:value-of select="$thisData/HireDate"/></font></strong><br />
                                <br />
                                <xsl:value-of select="$thisData/Address"/><br />
                                    <xsl:value-of select="$thisData/City"/>,&#160;<xsl:value-of select="$thisData/State"/>,&#160;<xsl:value-of select="$thisData/ZipCode"/><br />
                                    <xsl:value-of select="$thisData/PhoneHome"/><br />
                                    Mgr: <xsl:value-of select="$thisData/MgrFirstName"/>&#160;<xsl:value-of select="$thisData/MgrLastName"/><br />
                                    Dept: <xsl:value-of select="$thisData/Department"/><br />
                                    Team: <xsl:value-of select="$thisData/TeamName"/><br />
                                    Shift: <xsl:value-of select="$thisData/Shift"/></p></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </xsl:template>
</xsl:stylesheet>
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 20081824
you could add a test

                      <td align="center">
                          <xsl:if test="following-sibling::Data[1]">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                           </xsl:if>
                        </td>
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question