ASP.NET Controls Filter the Data View

ASP.NET Controls Filter the Data View

Rate This

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

  • Thanks for the tip. Have you looked at whether it is possible or if there are any issues with Ajax enabling this solution with the UpdatePanel?

    Thanks,

    Barry

  • AJAX here should be fine. You may notice that you can select the view of Products in SPD and click on Data View..Change Layout. Then click on the 'General' tab. In there we have a check box to enable sorting and grouping on column headers. That feature uses AJAX-y code.

  • Glad to hear it. It would be nice not to pull back down the master page on a refresh within the UpdatePanel.

    Barry

  • How can i set a default value like "Please make an selection" ?

  • Yes. You need to set the properties on the dropdownlist control to do that.

    1. Select the control

    2. click on Task Panes > Tag Properties

    3. change the AppendDataBoundItem to be True

    4. Click the Smart Panel > Edit Items

    5. click "Add"

    6. type "Please make a selection" for the Text property

    7. Click "OK"

    That'll do it for you.

  • Thanks John,

    That does the trick. One other question: how can i use the asp.net control to control a listview webpart? I cannot create a new filter in a webpart, only choose from values.

    Paul

  • Hi, thanks for a fantastic article! Very helpful.

    I have go this working with Dropdown, but can't get it working with either checkboxlist or radiobuttonlist....is there something special I need to do for those please? Thank you.

  • Thanks John, your post is quite helpful as resources on Sharepoint Designer are almost non-existent.

    Is there a way to filter the datasource of a second dropdown based on the choice from the first dropdown?  (list of states based on choice of country)

  • Sorry I didn't see these comments in time to respond one at a time...

    1. Paul, you can't use this with ListViews because they don't take parameters in for filtering.

    2. Adam, yeah, you need to code the ParameterBinding by hand, unfortunately. When you follow the above steps, you should have a <parameterbinding location="dropdownlistbox1" .../> tag in your page. You need to change that to this: <parameterbinding location="checkboxlist(checked)" .../> where 'checked' is the property on the control you want to evaluate.

    3. Brian, undortunately, not OOTB in this release. You can do this via Javascript, though, if you search live.com for something like "onchange javascript filter drop down". Sorry I'm not more help on that one.

  • How to filter in a ListFormWebPart?

  • I thought other users might appreciate my solution the question I posed earlier about filtering a dropdown based on the selection from the first dropdown (list of states based on choice of country):

    <asp:SqlDataSource...  SelectCommand="SELECT * FROM [States] where [Country] = @Country">

    <SelectParameters>

    <asp:controlparameter PropertyName="SelectedValue" Name="Country" ControlID="ddlCountry" />

    </SelectParameters>

    </asp:SqlDataSource>

  • John,

    Could you clarify your response to Adam about filtering based on a checkbox?  I have not been able to get it to work.

    When I follow your steps for filtering on the dropdown, the ParameterBinding looks like this:

    <parameterbinding... location="Control(DropDownList1)" .../>  [note the Control(...)]

    1.  Do we keep the Control(...) for the checkbox, or does it go away?

    2.  Is 'checkboxlist' in your example the id of the checkbox list?  The reason I ask is that there is an <asp:checkboxlist> control.

    I have tried the following variations without success:

    <parameterbinding... location="chkID(Checked)" .../>

    <parameterbinding... location="Control(chkID(Checked))" .../>

    <parameterbinding... location="Checkbox(chkID)" .../>

    Thanks, Brian

  • Here I go again providing a solution my own question.  I didn't have any luck with the ParameterBinding, so I replaced the WebPartPages:DataFormParameter (that was created when I added the filter) with an asp:ControlParameter.

    <asp:SqlDataSource... SelectCommand="SELECT * FROM [Table] WHERE [BooleanColumn] = @Condition>

    <SelectParameters>

    <asp:ControlParameter Name="Condition" PropertyName="Checked" ControlID="chkTest" DefaultValue="False"/>

    SelectParameters>

    </asp:SqlDataSource>

    Where 'chkTest' is the id of the checkbox on my page, and 'Condition' is the arbitrary name I gave the parameter.

    Cheers, Brian

  • Sorry to leave you hanging like that. Your solution is excellent. My solution was typed incorrectly.

    I meant to tell you to do this:

    <ParameterBinding Name="Param1" Location="Control(CheckBox1,Checked)" DefaultValue="foo"/>

    Which I just tested and verified it does work.

    Sorry about the confusion.

    -John

  • Great post - just what I needed. Is there a way to allow for "All Items" to be returned. I have added a default Item to the list and updated the AppendDataBound Items = "true". This gives me a dropdown with choices "All Items" and then my list of choices, but I want the defualt view "All Items" to return all itmes in the list and not filter them, and then for the user to be able to filter the results. Is this possible?

Page 1 of 12 (167 items) 12345»
Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post