Multiple Filters on a Data View Webpart

Posted on August 3, 2009. Filed under: Data View Webparts | Tags: , , , |

 Multiple Filters on a Data View Webpart

Well by now if you are playing with the SharePoint List view webparts, its understood that you can have only one data connection associated to a out of box Filter webpart.

And this is where the MAGIC of data view webpart is cast.

This post will guide you through to add multiple filters to a data view webpart.

 Lets start by assuming you have “Sales Contacts” List with Basic Columns like Title, Phone Number, Country, Line of Business, E-mail, etc., And the Requirement here is to have a filter (using drop down controls) on Line of Business & Country.

 In ideal scenario the two columns – Country & Line of Business are Look up columns
(or at least that’s how I would prefer), so in addition to the Sales Contacts we have two more lists in the site by name “Country” & “Line of Business”.

  Open your Site (http://xxxxx/sites/SiteA) in the SharePoint Designer.

  1. Create an aspx page. <Give all the necessary references, styling, webpart zones, etc.> and switch to the design view.
  2. Insert a data view webpart. Choose the “Sales Contacts” list as data source and Insert all the required fields as “Multiple Item View”.
  3. Insert Asp Drop down controls. Switch to code view and set their ID as DropDownFilter1 & DropDownFilter2.              
  4. Now Let’s Data Bound the drop down controls to the Look up lists to fetch the filter values. In the design View Navigate to the data Source Library. Select the “Country” list and click the option “Insert Data Source Control”. A Data Source Control is now inserted on to your page for the resp. list, switch to code view and modify the ID of the datasource to “CountryDS” ( resp. Tag  to identify the data source <SharePoint:spdatasource>). Repeat the same procedure for “Line of Business” list and let the ID be “LineOfBusinessDS”.
  5. Select the DropDownFilter1 and Click “Choose data Source”, assign the “CountryDS” and similarly for the other filter control.

 pic1

 *Do not enable Auto Post back.

6.  Now add a Button and Name it “Filter”. Switch to Code view and add a mouse event. “<asp:Button runat=”server” Text=”Filter”  id=”ButtonFilter” OnClientClick=”javascript: return ApplyFilter(event)/>”.

7. Click on the Data View webpart, from the “Common data view tasks” select the option “Parameters”. Create a new parameter “Filter1”, Select the “Parameter source” as “Control” and “ControlID” as ‘DropDownFilter1’. Similarly create a parameter Filter2 and assign the ControlID ‘DropDownFilter2’.

 pic2

8. Now let’s add the Filter to the Data view web part. From the “Common data view tasks” select the option “Filter”. Enable the “Add XSLT Filtering” and Click Edit. Build the Required XSLT Expression, for e.g. here assuming the look up list has a default item “All” to Filter – [(contains(@Line_x0020_of_x0020_Business, $Filter2) or $Filter2 = ‘All’) and (contains(@Country, $Filter1) or $Filter1 = ‘All’)]”.

9. Now we are left out with the JavaScript function “ApplyFilter”.

<script>

     function ApplyFilter(event)

     {                 

     document.location.href = “http://xxxxx/sites/SiteA/pg/FilterContacts.aspx “;   

     }

</script>

 

 

Alternate Approach 1:

An Alternate approach to apply filter values to the Data view webpart would be by using the Query String parameters. In that case the parameter source would be “Query String” (as discussed in point 7). If you intend to use query strings then the java script function would be –

<script>

function ApplyFilter(event)

{

var DropDownFilter1 = getTagFromIdentifierAndTitle(‘select’,’DropDownFilter1′,”);

var Filter1 = DropDownFilter1.value;

var DropDownFilter2 = getTagFromIdentifierAndTitle(‘select’,’DropDownFilter2′,”);

var Filter2 = DropDownFilter2.value;

if(Filter1 != null && Filter2 != null)

          {

          var url = “http://&#8221; + document.location.host + document.location.pathname;

          document.location.href = url +”?Filter1=” +Filter1 +”&Filter2=” +Filter2 ;

          }

          return false;

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)

{

 var len = identifier.length;

 var tags = document.getElementsByTagName(tagName);

 for (var i=0; i < tags.length; i++)

 {

   var tempString = tags[i].id;

   if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len))

   {

    return tags[i];

   }

 }      

  return null;

}                          

</script>

 

 

Alternate Approach 2: Using jQuery

If the requirement is that user wants to filter the list by a wild card and if you intend to use jQuery (i’m Lovin it) please refer to this Fantastic utility on Codeplex – Instant List Filters .

Read Full Post | Make a Comment ( 12 so far )

    About

    Xperiments n Xperiences. For the Last 5 years I have been providing variuos portal solutions (SharePoint focused) to my clients and now I intend to publish few of those solutions 'Not As It Is', which might help you. – Mash

    RSS

    Subscribe Via RSS

    • Subscribe with Bloglines
    • Add your feed to Newsburst from CNET News.com
    • Subscribe in Google Reader
    • Add to My Yahoo!
    • Subscribe in NewsGator Online
    • The latest comments to all posts in RSS

    Meta

Liked it here?
Why not try sites on the blogroll...