Home/ Questions/Q 8747243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:19:27+00:00

I have to create html that looks like treegrid from a given XML. Example

  • 0

I have to create html that looks like treegrid from a given XML.

Example of treegrid:
TreeGrid

My xslt is almost done, i just need to apply some margins to look like there are levels.

The XML is:

    <?xml version="1.0" encoding="UTF-8"?>
<rows>

  <row id="FOLDER1">
    <cell image="blank.gif">Folder 1</cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell sum="1">$23</cell>
    <row id="FOLDER2">
      <cell image="blank.gif">Folder 2</cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell></cell>
      <cell sum="2">$11</cell>
      <row id="FOLDER3">
        <cell image="blank.gif">Folder 3</cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell></cell>
        <cell sum="3">$44</cell>
        <row id="pro1">
          <cell image="blank.gif">Product 1</cell>
          <cell>324234</cell>
          <cell>3.00</cell>
          <cell>Kilo</cell>
          <cell>1.00</cell>
          <cell>No</cell>
          <cell>€ 33.33</cell>
          <cell>€ 33.33</cell>
        </row>
        <row id="pro2">
          <cell image="blank.gif">Product 2</cell>
          <cell>4354354</cell>
          <cell>1.00</cell>
          <cell>Kilo</cell>
          <cell >0.50</cell>
          <cell>No</cell>
          <cell>€ 2.53</cell>
          <cell>€ 1.26</cell>
        </row>

      </row>
      <row id="pro3">
        <cell image="blank.gif">Product 3</cell>
        <cell>435436</cell>
        <cell>10.00</cell>
        <cell>Kilo</cell>
        <cell>Yes</cell>
        <cell>€ 0.36</cell>
        <cell>€ 3.60</cell>
      </row>

    <row id="pro4">
      <cell image="blank.gif">Product 4</cell>
      <cell>435435</cell>
      <cell>3.28</cell>
      <cell>Kilo</cell>
      <cell>1.00</cell>
      <cell>No</cell>
      <cell>€ 17.38</cell>
      <cell>€ 17.38</cell>
    </row>
    <row id="NEWCAT_59">
        <cell image="blank.gif">&lt;strong&gt;+ Add new category&lt;/strong&gt;</cell>
      </row>
      <row id="NEWSEMING_59">
        <cell image="blank.gif">&lt;strong&gt;+ Add new product&lt;/strong&gt;</cell>
      </row>
   </row>
  </row>

</rows>

The XSLT is:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/rows">
        <table>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
            </tr>
            <xsl:apply-templates select="row"/>
        </table>
    </xsl:template>

    <xsl:template match="row">
        <tr>
            <xsl:apply-templates select="cell"/>
        </tr>
        <xsl:apply-templates select="row"/>
    </xsl:template>

    <xsl:template match="cell">

        <xsl:variable name="img" select="../@id"/>
        <xsl:variable name="cellvalue" select="."/>
        <xsl:variable name="cellattribute" select="./@image"></xsl:variable>

        <xsl:if test="$cellvalue!='&lt;strong&gt;+ Add new category&lt;/strong&gt;' and $cellvalue!='&lt;strong&gt;+ Add new product&lt;/strong&gt;' ">

            <td>
             <xsl:choose>

            <xsl:when test="starts-with($img, 'FOLDER') and $cellattribute='blank.gif'">
        <img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif"></img>
        <xsl:value-of select="."/>
            </xsl:when>

            <xsl:otherwise>
                    <div style="margin-left:20px;display: inline;"><xsl:value-of select="."/></div>
                    </xsl:otherwise>

              </xsl:choose>
            </td>

        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

Folder 2 is in Folder 1 and Folder 2 and Folder 3 are both in Folder 1.So i need cells from Folder 2 to be more to the right from the cells from Folder 1, and the same thing to apply for Folder 3 or any other Folders in the XML.

Expected output:

<html><head></head><body><table>
    <tbody><tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif">Folder 1</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$23</div>
        </td>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
    margin-left: 20px;
">Folder 2</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$11</div>
        </td>
    </tr>
    <tr>
        <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
    margin-left: 40px;
">Folder 3</td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;"></div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">$44</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 60px;display: inline;">Product 1</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">324234</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">3.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 60px;display: inline;">Product 2</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">4354354</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">0.50</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 2.53</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 1.26</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 40px;display: inline;">Product 3</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">435436</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">10.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Yes</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 0.36</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 3.60</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="margin-left: 40px;display: inline;">Product 4</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">435435</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">3.28</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">No</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
        </td>
        <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
        </td>
    </tr>
    <tr>
    </tr><tr>
</tr></tbody></table></body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This XSLT 1.0 style-sheet…

    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:strip-space elements="*" />

<xsl:template match="/">
  <html>
    <head/>
    <body>
      <xsl:apply-templates select="rows" />
    </body>
  </html>
</xsl:template>

<xsl:template match="rows">
  <table>
    <tbody><tr>
      <xsl:for-each select="row[1]/cell">
        <th><xsl:value-of select="position()" /></th>
      </xsl:for-each>
    </tr>
    <xsl:apply-templates select="descendant::row" />  
  </tbody>
  </table>
</xsl:template>  

<xsl:template match="row[contains(cell[1],'Add new ')]" />

<xsl:template match="row">
  <tr>
    <xsl:apply-templates select="cell" />
  </tr>  
</xsl:template>

<xsl:template name="style">
  <xsl:param name="margin" select="0" />
  <xsl:param name="display" select="'inline'" />
  <xsl:variable name="v1">
    <xsl:if test="$margin &gt; 0">
      <xsl:value-of select="concat('margin-left:',$margin,'px;')" />
    </xsl:if>
    <xsl:if test="$display">
      <xsl:value-of select="concat('display: ',$display,';')" />
    </xsl:if>
  </xsl:variable>  
  <xsl:if test="$v1">
    <xsl:attribute name="style"><xsl:value-of select="$v1" /></xsl:attribute>
  </xsl:if>
</xsl:template>

<xsl:template match="cell[position()=1][starts-with(../@id,'FOLDER')]" priority="3">
  <!-- First column for FOLDER rows -->
  <td>
    <img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif">
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="(count(ancestor::row) - 1)*20" />
        <xsl:with-param name="display" select="''" />
       </xsl:call-template>
     </img>
  <xsl:value-of select="." />
  </td>  
</xsl:template>

<xsl:template match="cell[position()=1]" priority="2">
  <!-- First column for non-FOLDER rows -->
  <td>
     <div>
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="(count(ancestor::row) - 1)*20" />
       </xsl:call-template>
       <xsl:value-of select="." />
     </div>
  </td>  
</xsl:template>

<xsl:template match="cell" priority="1">
  <!-- Subsequent columns -->
  <td>
     <div>
      <xsl:call-template name="style">
        <xsl:with-param name="margin" select="20" />
       </xsl:call-template>
       <xsl:value-of select="." />
     </div>
  </td>  
</xsl:template>

</xsl:stylesheet>

    …will transform the supplied input into…

    <html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="">Folder 1</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$23</div>
          </td>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="margin-left:20px;">Folder 2</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$11</div>
          </td>
        </tr>
        <tr>
          <td><img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="margin-left:40px;">Folder 3</td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">
            </div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">$44</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:60px;display: inline;">Product 1</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">324234</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">3.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 33.33</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:60px;display: inline;">Product 2</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">4354354</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">0.50</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 2.53</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 1.26</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:40px;display: inline;">Product 3</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">435436</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">10.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Yes</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 0.36</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 3.60</div>
          </td>
        </tr>
        <tr>
          <td>
            <div style="margin-left:40px;display: inline;">Product 4</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">435435</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">3.28</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">Kilo</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">1.00</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">No</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
          </td>
          <td>
            <div style="margin-left:20px;display: inline;">€ 17.38</div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

    Caveats

    1. This solution will not work for tables nested within tables. But from the context, I thought it was a pretty good bet that this would not be an issue.

    2. This is not a particularly tight solution. It emphasises readability instead. If a more concise solution is important to you, let me know, and I will produce accordingly.

    3. The rules of transformation in relation to the margin-left style, were not clear to me. I made the following assumptions.

      • The head column of rows have a margin in proportion to input ‘row’ node’s element depth.
      • All other columns have a fixed margin of 20px.
    • 0