Adding a Dropdown (Select) to a DVWP

In an earlier post, I wrote about Eliminating Duplicates in Data View Web Parts.  I just got a question on that post about how to create the dropdown in the first place, and it seemed post-worthy.  Generally, you’ll want to create a separate DVWP containing a dropdown and use it to trigger the display of some content on the same page or another page.

To get the basics of the dropdown onto your page as a DVWP, follow the steps below.  As I’ve mentioned before, I suggest using the Split view so that you can both see what you are getting on the Design canvas as well as in the code.

• Position your cursor on the Design canvas where you’d like the DVWP to sit
• From the top menu, choose Data View / Insert Data View…  The Data Source Library pane should display on the right side of your screen.
• Select the list or other data source which contains the values you want for your dropdown.  This might be a reference list (perhaps one that drives the contents of a Site Column) or a list with many items in it.
• From the data source dropdown, choose Show Data.  You’ll now see the columns in your data source.
• Click on the column that you would like to appear in your dropdown, then choose Insert Selected Fields As… / Multiple Item View above.
• Now, over in the Design canvas, click on the “twiddle”   for the DVWP.  (I’m sure this thing has a real name, but I’ve always called it a twiddle.)  It’s in the upper right of the DVWP’s bounding box.  Choose the Change Layout… option.  The twelfth option (in my SharePoint Designer, anyway) has a preview image that looks like a dropdown, and the description says “The dropdown menu of titles style shows a dropdown menu that contains the titles for all the items in the list.”  Pick it!

At this point, you’ll have a dropdown (select) displaying in your DVWP.  Jump to my other post (mentioned above) to clean it up and eliminate the duplicates, if needed.  Then bop on over to yet another post entitled   Firing an Event When a User Selects a Value from a Data View Web Part Dropdown to see how you can have a change in the dropdown actually make something happen!