ASP.NET Controls Filter the Data View
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...
- Place your page into design view
- Click Task panes :: Data Source Library
- Click the data source called Categories
- Click to Insert Data Source Control
- If prompted, click “Yes” to display the control
- Place insertion point below this control
- Click Insert :: ASP.NET Controls > Drop Down List
- Click the Smart Panel :: Choose Data Source...
- Choose the Data Source (for example, SPListDataSource1)
- Tell it to display "CategoryName" (or the field that contains your category name)
- Make its value "CategoryName"
- Click OK
- Click to select the dropdownlist control
- Click the Smart Panel :: AutoPostBack == True
- Drag and drop the Products list onto a page to create a Data View
- Clck the Smart Panel :: Edit Columns to add and remove the columns you want to display
- Click Data View :: Filter
- 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 - Click OK
- Click OK again
- Save the page
- Preview in the browser
- Make a change to the DropDownList control
OK. That should do it! Good luck.
-John