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


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=”
http://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=”http://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=”
http://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=”http://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=”
http://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=”http://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.

Comments (3)

  1. Steve Evans says:

    Hi,

    I’ve been trying to get a drop down to filter three other web parts on the same page. I have a contacts list, a doc library and an announcements list all with view on the homepage. All three parts have a field for company name and I want users to be able to filter the views on the page according to company.

    I have set up a custom list with values of the company names and using the code above inserted a data view and set up the connections but it’s not working. When I reload the all three web parts are automatically filtered to the top entry in the drop down, then when selecting another company name in the dropdown the first web part on the page filters to that choice and the other two default back to showing all entries. Any help you could give would be great.

    And does anyone know a good host for some wss webspace? Can be reached at info@NOSPAMspiralize.co.uk (remove the NOSPAM). Thanks!

  2. Cabiria says:

    This works great, but after each selection the dropdown list shows as selected item "Choose One…". How can show the selected item instead?

  3. John Jansen says:

    Unfortunately that kind of functionality is a lot more complicated than it would at first appear, and can’t be done using this method. This suggestion is definitely something I want enabled for next time, tough.

    -J