Link to home
Start Free TrialLog in
Avatar of CharlieDev
CharlieDevFlag for United Kingdom of Great Britain and Northern Ireland

asked on

c# asp.net - how to style an xsl tag

Hi,
I need to style a label so that it changes colour when hovered over.

I need to style: <xsl:with-param name="label">Name</xsl:with-param>

I have put a div tag around the whole template, but I dont know how to write in the css to get the hover over colour to change.
Is this how I do it or do I need to use someother code and not use css styling?

Any help or ideas much appreciated
Thanks
<xsl:for-each select="Sort"><div class="ProdListTitleRollover">
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template></div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of abel
abel
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CharlieDev

ASKER

Thanks very much. I am unsure of where to put the following code:<div class="columnhead"><xsl:value-of select="$label" /></div>

I dont have <xsl:value-of select="$label" />  anywhere, do I need to put it in?

Sorry i'm really new to all this as you can see. Could you possibly show me where in my code i need to put it?
Thanks
<xsl:for-each select="Sort">
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">ISIN</xsl:with-param>
              <xsl:with-param name="label">ISIN</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>

Open in new window

> I dont have <xsl:value-of select="$label" />  anywhere, do I need to put it in?

What you are showing is only a snippet. In that snippet is nothing you can do or put it. I can help you with it, but then you'll have to show the snippet with the named template itself. It should look something like:

<xsl:template name="ColumnHead">

Was this code given to you? Because it looks like a pretty stiff codebase already and if you're new to it you did a pretty good job!
The code was given to me yes! I couldn't write it at the moment,I have no where near enough experience.
I have tried to search for xsl:template name but I cant find it in any of the files.

The code below is the main xslt page, is there anywhere on there i can put the div?

Many thanks
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
  <xsl:include href="Widget.Grid.xslt" />
 
  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />
  <xsl:template match="ProductData">
 
    
    <div class="contentContainer">
      <div class="floatLeft">
        <h3><xsl:value-of select="Paging/@RecordsTotal"/> Funds found</h3>
        <p class="contentStyle01">You are viewing all funds</p>
      </div>
      <div class="productListTools">
        <ul>
          <li>
            <label for="jumpMenu">Number of results: </label>
            <xsl:for-each select="Paging">
              <xsl:call-template name="RecordCountOptions">
                <xsl:with-param name="sorting" select="/ProductData/Sort" />
              </xsl:call-template>
            </xsl:for-each>
          </li>
          <li>
            <a class="pdfIcon">
              <xsl:attribute name="href">
                <xsl:text>ProductListPDF.aspx?page=</xsl:text>
                <xsl:value-of select="/ProductData/Sort/@PageNumber"/>
                <xsl:text>&amp;rCount=</xsl:text>
                <xsl:value-of select="/ProductData/Sort/@PageSize"/>
                <xsl:text>&amp;sCol=</xsl:text>
                <xsl:value-of select="name(/ProductData/Sort/*[1])"/>
                <xsl:choose>
                  <xsl:when test="/ProductData/Sort='Descending'">&amp;sDir=A</xsl:when>
                  <xsl:otherwise>&amp;sDir=D</xsl:otherwise>
                </xsl:choose>
              </xsl:attribute>
              PDF</a>
          </li>
          <li>
            <a href="#" onclick="window.print();return false;" class="printIcon">Print</a>
          </li>
          <li>
            <a href="ProductListingExcel.aspx" class="excelIcon">Excel</a>
          </li>
        </ul>
      </div>
    </div>
    
    <div class="contentContainer">
    <table cellpadding="2px" cellspacing="0" class="tableStyle03">
      <thead>
        <tr>
          <xsl:for-each select="Sort">
            <div class="ColumnHeadTitle"> <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Name</xsl:with-param>
              <xsl:with-param name="label">Name</xsl:with-param>
              <xsl:with-param name="isFirst">true</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
              <xsl:with-param name="colspan">2</xsl:with-param>
            </xsl:call-template></div>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">ISIN</xsl:with-param>
              <xsl:with-param name="label">ISIN</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">LaunchDate</xsl:with-param>
              <xsl:with-param name="label">Issued</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Currency</xsl:with-param>
              <xsl:with-param name="label">Currency</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Bid</xsl:with-param>
              <xsl:with-param name="label">Bid</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Ask</xsl:with-param>
              <xsl:with-param name="label">Ask</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">DPercChange</xsl:with-param>
              <xsl:with-param name="label">% Chg</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
            <xsl:call-template name="ColumnHead">
              <xsl:with-param name="fieldName">Updated</xsl:with-param>
              <xsl:with-param name="label">Updated</xsl:with-param>
              <xsl:with-param name="paging" select="/ProductData/Paging" />
            </xsl:call-template>
          </xsl:for-each>
 
          <th />
 
        </tr>
      </thead>
 
 
      <xsl:for-each select="ProductData">
        <tr class="listing">
          <xsl:choose>
            <xsl:when test="position() mod 2 &lt;= 0">
              <xsl:attribute name="class">listing alternateBg</xsl:attribute>
            </xsl:when>
          </xsl:choose>
 
          <td class="firstCell">
            <a href="#" class="jstToggleDetails"><img class="jstIcon" src="../images/btn-ProductExpand.gif" alt="Expand details" /></a>
          </td>
          
          <td class="mainCell">
            <a href="#" class="jstToggleDetails">
              <xsl:choose>
                <xsl:when test="Name=''">Unknown</xsl:when>
                <xsl:otherwise>
                  <xsl:value-of select="Name"/>
                </xsl:otherwise>
              </xsl:choose>
            </a>
          </td>
          
          <td>
            <xsl:value-of select="ISIN"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="LaunchDate/@Day"/>/<xsl:value-of select="LaunchDate/@Month"/>/<xsl:value-of select="LaunchDate/@Year"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="Currency"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="format-number( round(100*Bid) div 100 , '#0.00' )"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="format-number( round(100*Ask) div 100 , '#0.00' )"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="DPercChange" /></xsl:call-template>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <xsl:value-of select="Updated/@Day"/>/<xsl:value-of select="Updated/@Month"/>/<xsl:value-of select="Updated/@Year"/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="Updated/@Hour"/>:<xsl:value-of select="Updated/@Minute"/>
            <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
          </td>
 
          <td>
            <a href="#"><xsl:attribute name="href">ProductDetail.aspx?isin=<xsl:value-of select="ISIN" /></xsl:attribute><img src="../images/btn-MoreDetail.gif" alt="Product details" /></a>
          </td>
        </tr>
        
        <tr class="detail" style="display: none">
          
          <td colspan="2">
            <img class="graph" src="../images/graph_loading.gif" alt="Graph Image">
              <xsl:attribute name="id">graph-<xsl:value-of select="ISIN"/>
            </xsl:attribute>
            </img>
          </td>
 
          <td colspan="3">
            Underlying: <xsl:value-of select="UnderlyingName"/><br />
            Underlying Type: <xsl:value-of select="UnderlyingType"/><br />
            WKN: <xsl:value-of select="WKN"/><br />
            Mnemonic: <xsl:value-of select="Mnemonic"/>
          </td>
 
          <td colspan="3">
            Fund Currency: <xsl:value-of select="Currency"/><br />
            Fund Type: <xsl:value-of select="ProductSubCategory"/><br />
            Launch Date: <xsl:value-of select="LaunchDate/@Day"/>/<xsl:value-of select="LaunchDate/@Month"/>/<xsl:value-of select="LaunchDate/@Year"/><br />
            Issuer: <xsl:value-of select="IssuingBank" />
          </td>
          
          <td colspan="2">
            1W %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="WPChange" /></xsl:call-template><br />
            1M %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="MPChange" /></xsl:call-template><br />
            YTD %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="YTDPChange" /></xsl:call-template><br />
            Alltime %: <xsl:call-template name="ColouredValue"><xsl:with-param name="Value" select="AllPChange" /></xsl:call-template>
          </td>
          
        </tr>
      </xsl:for-each>
    </table>
      
    </div>
  </xsl:template>
</xsl:stylesheet>

Open in new window

Hmm, this is getting a bit weird now. The XSLT as you posted it, is the main XSLT, it seems. It does not contain any named templates (they are supposed to be on the root level). Any XSLT that calls a template that does not exist will not even compile. However, there's an xsl:include in your XSLT. The Widget.Grid.xslt might have those named templates to complete the picture. Note that this second XSLT may include even more XSLT files.

If you want to be sure that I have everything and that I can help you correctly, you may want to ZIP the whole XSLT directory and add it as an attachment so that I can have a look at it for you.
Thanks very much! I've found <xsl:template name="ColumnHead"> in the widget.grid.xslt and i've found  <xsl:value-of select="$label"/>
So i'm going to try your earlier suggestion now!
Thanks very much, Its working now :)
I now need to put a javascript tag around each label!! So I may be asking for help on that soon! Good job that I like a challenge
Tx & glad you got it working!