Multiple Filters on a Data View Webpart
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.
- Create an aspx page. <Give all the necessary references, styling, webpart zones, etc.> and switch to the design view.
- Insert a data view webpart. Choose the “Sales Contacts” list as data source and Insert all the required fields as “Multiple Item View”.
- Insert Asp Drop down controls. Switch to code view and set their ID as DropDownFilter1 & DropDownFilter2.
- 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”.
- Select the DropDownFilter1 and Click “Choose data Source”, assign the “CountryDS” and similarly for the other filter control.
*Do not enable Auto Post back.
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’.
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’)]”.
document.location.href = “http://xxxxx/sites/SiteA/pg/FilterContacts.aspx “;
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 –
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://” + document.location.host + document.location.pathname;
document.location.href = url +”?Filter1=” +Filter1 +”&Filter2=” +Filter2 ;
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))
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 .