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

  • Hi,

    Is there a way to have distinct values in the dropdownlist?

  • I've used the SPD treeview control with success EXCEPT that, try as I might, I can not figure out how to change the font color and hover color of the linked nodes. I think I've changed every style on every style sheet and changed every NodeStyle parameter the TreeView has, yet the text remains blue.

    Worse is that the colors do change in Sharepoint Designer but not when I view the font in IE.

    Can you shed any light on this?

    Thanks.

  • I am trying to do the same thing, but my column in drop down list is it self a lookup filed. The values shows up as "1;#TEXT" with out quotes. Is there any way to work with this scenario?

    Mat

  • Hello !

    I have the same proble that JulesAnime, wanted to be able to show all the records before being leaked(filtered) on having changed the value of the dropdownlist. There is way of putting a value for default type ' all items' ?

    Excuseme , i don´t speak and wrote well in english.

    Thanks

  • Yes, you can change the above scenario for "All" items to be shown as well, but it can't be done at the source layer, you need to modify the above to do the filter at the XSLT layer. First of all, add the value "(All)" without the quotes as the selected value in your DropDownList Control, then

    1. Click in the Data View

    2. Click on Data View > Filter

    3. Delete the filter that is set there

    4. Click OK

    5. Switch to Code View

    6. Find the line that says: <xsl:template name="dvt_1.body">

    7. Add a line of code to that template just before the call template:

    <xsl:if test="@CategoryName = $Param1 or $Param1 = '(All)'">

    Your code will look like this:

    <xsl:template name="dvt_1.body">

    <xsl:param name="Rows"/>

    <xsl:for-each select="$Rows">

    <xsl:if test="@CategoryName = $Param1 or $Param1 = "'(All)'">

    <xsl:call-template name="dvt_1.rowview"/>

    </xsl:if>

    </xsl:for-each>

    </xsl:template>

    8. Save the page

    NOTE: Since this filter is now happening in the XSLT, you will see a performance hit. The amount of hit depends on the number of items in your source.

    Good luck!

    -John

  • I can do this for WSS 3.0 sites, but cannot for WSS 2.0 sites. :-(

    The "Insert Data Source Control" option is grayed out for WSS 2.0. How would I do this in WSS 2.0 or I can't?

  • How to add access database in sharep point designer?

  • Just What I was lookinf for.. Thanks!

    This link did the same for me on WSS 2.0 for those that are interested http://wss.collutions.com/Lists/FAQ/DispForm.aspx?ID=202

  • I have a question like this and i want to create a view based on those two

    Say list1 and list2 - list1 is similary to category list, list2 similar to product list however list2 has lookup field for list1 but can include multiple values from list1 in that field, it's like product belongs to multiple categories (for a given product you can specify multiple categories)

    now I want to have a view, that there's a list1 (category) drop down that you can select a category and then the products having that category should be listed below. (here this is many to many relationship) i tried using your way but it didn't work for me)

    tell me on how to do this, and remember that product (list2) has lookup field for category( list1) where you can select multiple categories for single product

    Thanks

  • How to do filter in a ListFormWebPart?

  • Rasika:

    Take a look at this demo.  It has a solution for part of your question:

    http://office.microsoft.com/home/video.aspx?assetid=HX102200491033&width=0&height=0&startindex=4&CTT=11&Origin=HA102199841033

  • How do I access the element selected in the drop down list?

  •  spdblog said:

    Yes, you can change the above scenario for "All" items to be shown as well, but it can't be done at the source layer, you need to modify the above to do the filter at the XSLT layer. First of all, add the value "(All)" without the quotes as the selected value in your DropDownList Control, then

    1. Click in the Data View

    2. Click on Data View > Filter

    3. Delete the filter that is set there

    4. Click OK

    5. Switch to Code View

    6. Find the line that says: <xsl:template name="dvt_1.body">

    7. Add a line of code to that template just before the call template:

    <xsl:if test="@CategoryName = $Param1 or $Param1 = '(All)'">

    Your code will look like this:

    <xsl:template name="dvt_1.body">

    <xsl:param name="Rows"/>

    <xsl:for-each select="$Rows">

    <xsl:if test="@CategoryName = $Param1 or $Param1 = "'(All)'">

    <xsl:call-template name="dvt_1.rowview"/>

    </xsl:if>

    </xsl:for-each>

    </xsl:template>

    8. Save the page

    NOTE: Since this filter is now happening in the XSLT, you will see a performance hit. The amount of hit depends on the number of items in your source.

    Good luck!

    -John

    I did all of this and it does load the page with "ALL Items" but now when i select one of the items in the dropdown the postback occurs but returns no results. PLEASE HELP!!

  • I've been working on filtering off of a drop down list using both the CAML queries generated by the Filter dialogue box and using XSLT at the call-template level.  While the most recent post on using XSLT does in fact filter everything correctly, it causes an issue with paging.  I have over 1500 pieces of data in the list that I am filtering.  The $Rows parameter holds every single row retrieved from the database.  This is also the variable used to signal when you've reached the limit for number of entries per page.  Because XSLT doesn't use variables in the modern sense of the word, the row counter cannot be decremented every time you skip over an element.  If I have my paging set at 100 items per page, this filter will always return 16 pages of information, even if some pages have no items that fit the filter criteria.  Each list item contains a picture that isdisplayed as a thumbnail on this same page, so showing all of the items on one page to bypass the paging issue is suicide for performance and is just too hard to look at when few values have been filtered out.  Any help is apprciated

  • Hi,

    I need an urgent help. I have an aspx page where i have 2 textboxes and 1 drop down list. I have a dataview for which the datasource is from a custom list- Assets. Also the drop down populates values from another list - Asset Type.

    By default i want the dataview to display all items. Whenever i enter any filter criteria, i want the rows to get filtered. I have created 3 parameters - 2 for text boxes and 1 for drop down. Kindly advice how to proceed, b'coz when i gave % as the default value for these parameters i checked in the DB , when the query was executed the comparison was done - LIKE '%[%]%.

    I am not able to remove the [] brackets. Please advice

    Regards,

    sowmya

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