asked on

XSL to render an HTML UL, with text at the 10 list item

I have a C# class generating an XML document that I later put through an XSL transformation, which is essentially outputting an HTML unordered list. I have XSL to do the outputting of a list, but I need to modify it to see if there are 10 or more items, and if so terminate the current list, display text that says "see more" and start a new list, processing the rest of the items to effectoively split the results into 2 lists : the top 10 and the rest, separated by the "see more" link which i will use to toggle them. What I have tried so far is to terminate the current UL and start a new one, but the xsl errors, saying i cannot close a tag that hasnt been opened yet. Any thoughts? My xsl is below :

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output indent="yes" method="html" omit-xml-declaration="yes"/>
      <xsl:template match="mods">
            <ul class="{@class}">
                  <xsl:apply-templates select="mod" />
            </ul>
      </xsl:template>

      <xsl:template match="mod">
            <li>
                  <div>
                        <a href="{@path}">
                              <xsl:value-of select="@name" />
                              <xsl:text> </xsl:text>
                              <table cellspacing="0" cellpadding="0" width="100%" style="width:100%;height:5px">
                                    <tr>
                                          <td style="background-color:#EBEBD8" width="100%">
                                                <table cellspacing="0" cellpadding="0" width="{@count}" style="height:5px">
                                                      <tr>
                                                            <td style="background-color:#CC0033">
                                                            </td>
                                                      </tr>
                                                </table>
                                          </td>
                                    </tr>
                              </table>
                        </a>
                  </div>
                  <xsl:if test="mod">
                        <ul>
                              <xsl:apply-templates />
                        </ul>
                  </xsl:if>
                  <xsl:if test="position() = 10">
                        <br />See More Results<br />
                  </xsl:if>

            </li>
      </xsl:template>
</xsl:stylesheet>

ASKER CERTIFIED SOLUTION

Gertone (Geert Bormans)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

harton

ASKER

Worked perfectly, thanks!

Gertone (Geert Bormans)

welcome

harton

ASKER

Hmm, just noticed, it's not getting child nodes. Example hierarchy :
1
1>1
1>2
1>2>1
2
2

would only have nodes "1", "2", and "3" put through the templates, and not node "1"'s children.

It looks like the template didn't check if there were children to put run them through the same template.

Gertone (Geert Bormans)

That is something you need to handle in the mod template
I can show you an example if you could show me a piece of the XML structure

harton

ASKER

harton

ASKER

The 10 node limit should apply to top level tree roots [mods at the top level, no children.]

Gertone (Geert Bormans)

so, you will need an apply-templates for mod inside the template for mod,
something like this

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="mods">
<ul class="{@class}">
<xsl:apply-templates select="mod[position() <= 10 ]" />
</ul>
<xsl:if test="count(mod) > 10">
<br />See More Results<br />
<ul class="{@class}">
<xsl:apply-templates select="mod[position() > 10 ]" />
</ul>
</xsl:if>
</xsl:template>
<xsl:template match="mod">
<li>
<xsl:value-of select="@name"/>
<xsl:if test="mod">
<ul>
<xsl:apply-templates select="mod"></xsl:apply-templates>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>

If you want to differentiate between the different levels of mod, you can do like this
<xsl:template match="mods/mod">
<li>
<xsl:value-of select="@name"/>
<xsl:if test="mod">
<ul>
<xsl:apply-templates select="mod"></xsl:apply-templates>
</ul>
</xsl:if>
</li>
</xsl:template>
<xsl:template match="mod/mod">
<li>
<xsl:value-of select="@name"/>
<xsl:if test="mod">
<ol>
<xsl:apply-templates select="mod"></xsl:apply-templates>
</ol>
</xsl:if>
</li>
</xsl:template>

The first template is for mod that is a child of mods
The second template is for mod that is a child of mod

cheers

Geert