ASP.NET Controls Filter the Data View

John Hey there,

My name is John Jansen and I'm one of the Test Leads for the SharePoint Designer (SPD) product group. My specialty is data presentation and application building. But I also love to play around with CSS and generic ASP.NET controls. I plan to post tips and tricks here based on questions I see asked in Newsgroups as well as Discussion Boards inside Microsoft.

This first tip is about inserting an ASP.NET control onto a page in SharePoint Designer and then using that control as the mechanism for filtering a Data View on the page. For the purposes of this post, I'm using a DropDownList control because that seems to be the one most people ask about, but you could use a TextBox or CheckBox or anything else and get similar results. The scenario here is that you have a bunch of Categories and a bunch of Products that fit into those Categories, and you want to use a DropDownList to show Products for a specific Category.

To begin, create two lists in the browser: Categories with a field of CategoryName and Products with a field of CategoryName as well (I use a Lookup field type for simplicity, but it doesn't have to be - this code does a simple string compare). Then fill out the lists so you have more than one item in each.

This tip also assumes you already know how to open your Site in SPD and you have created a new page. I realize it is a lot of steps, but I believe they are pretty straight forward as you perform them...

  1. Place your page into design view
  2. Click Task panes :: Data Source Library
  3. Click the data source called Categories
  4. Click to Insert Data Source Control
  5. If prompted, click “Yes” to display the control
  6. Place insertion point below this control
  7. Click Insert :: ASP.NET Controls > Drop Down List
  8. Click the Smart Panel :: Choose Data Source...
  9. Choose the Data Source (for example, SPListDataSource1)
  10. Tell it to display "CategoryName" (or the field that contains your category name)
  11. Make its value "CategoryName"
  12. Click OK
  13. Click to select the dropdownlist control
  14. Click the Smart Panel :: AutoPostBack == True
  15. Drag and drop the Products list onto a page to create a Data View
  16. Clck the Smart Panel :: Edit Columns to add and remove the columns you want to display
  17. Click Data View :: Filter 
  18. Create the following filter:
                    Field: CategoryName (or the field that contains your category name)
                    Comparison: Equals
                    Value: [Create a new Parameter]
                                    Param Name: Param1
                                    Source: Control
                                    Control ID: DropDownList1
                                    Default: Beverages
  19. Click OK
  20. Click OK again
  21. Save the page
  22. Preview in the browser
  23. Make a change to the DropDownList control

OK. That should do it! Good luck.

-John