HOWTO: Fire a connection from the Drop-down view style of the Data View Web Part

  • Article

1. Insert two Data Views of your data.

2. Select one of the Data Views, choose Style from the Data View Details taskpane.

3. Choose the drop-down box style from the list of styles, click OK.

4. Right click this Data View, choose Web Part connections.

5. Connect to the other Data View as you would normally.

6. Go into Code View.

7. Look for the <a target="_self"> code that looks similar to this (usually, it would be the first <a> tag in the page) and copy the entire block for the first XSL:ATTRIBUTE (see below):

<a target="_self">

<!-- NOTE: start copying here -->
<xsl:attribute xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="href"><xsl:variable name="cursel">dvt_curselkey={<xsl:value-of select="$CurrentRowKey"/>}</xsl:variable><xsl:variable xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="fields">@ID=<xsl:value-of select="ddwrt:ConnEncode(string(@ID))"/></xsl:variable>javascript:<xsl:value-of select="ddwrt:GenFireConnection(concat('99d2bb39-f973-482c-a0ca-e49b56eae72d*',$fields),string($cursel))"></xsl:value-of></xsl:attribute>
<!-- NOTE: end copying here-->

<xsl:attribute name="style"><xsl:if test="$CurrentRowKey = $dvt_curselkey">font-weight: bold;</xsl:if></xsl:attribute>
<xsl:value-of select="@Title"/>
</a>

8. Look for the code for the <option> tag. It should be right above the <a> tag.

9. Paste in the section of code you copied above. 

10. Change the name="href" part to name="value". At this point, you should have something like this:

<option style="display:{$GroupStyle}">
<xsl:attribute xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="value"><xsl:variable name="cursel">dvt_curselkey={<xsl:value-of select="$CurrentRowKey"/>}</xsl:variable><xsl:variable xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="fields">@ID=<xsl:value-of select="ddwrt:ConnEncode(string(@ID))"/></xsl:variable>javascript:<xsl:value-of select="ddwrt:GenFireConnection(concat('99d2bb39-f973-482c-a0ca-e49b56eae72d*',$fields),string($cursel))"></xsl:value-of></xsl:attribute>
<a target="_self">
<xsl:attribute xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="href"><xsl:variable name="cursel">dvt_curselkey={<xsl:value-of select="$CurrentRowKey"/>}</xsl:variable><xsl:variable xmlns:xsl="https://www.w3.org/1999/XSL/Transform" name="fields">@ID=<xsl:value-of select="ddwrt:ConnEncode(string(@ID))"/></xsl:variable>javascript:<xsl:value-of select="ddwrt:GenFireConnection(concat('99d2bb39-f973-482c-a0ca-e49b56eae72d*',$fields),string($cursel))"></xsl:value-of></xsl:attribute>
<xsl:attribute name="style"><xsl:if test="$CurrentRowKey = $dvt_curselkey">font-weight: bold;</xsl:if></xsl:attribute>
<xsl:value-of select="@Title"/>
</a>
</option>

11. Look for the <select> tag for the drop down. It should look something like:

<select name="ID" size="1">

12. Add an onchange event handler for the tag, as follows:

<select name="ID" size="1" onchange="eval(this.options.value)">

Now when you change the value your drop-down, your connection should fire.