Monday, February 8, 2010

Filter between two dates using the DataView and jQuery

This is the second round of filtering between dates in a SharePoint DataView. With this version, you do not need to be using the filters from the Enterprise version. (I am using the Standard version for now so was forced to get this working....)

Step by Step Instructions:
1. Using SPD, create an asp.net page. Add in the web part to be filtered to the page.



2. Add 4 asp.net controls. I named them txtDate1, txtDate2 and alttxtDate1, alttxtDate2. Feel free to choose your own. Note: thanks to the views below, the txtDate1 and txtDate2 asp.net textboxes have to have the AutoPostBack attribute set to true. We will hide the latter two. (Now the reason for the latter two fields: After some digging, the filter takes the dates formatted as yy-mm-dd. We are in the US so we don’t want to display the date like this. Thus the use of alternate fields to pass in for processing, but display we’ll see the good display. >.< )


From Date:

<asp:TextBox runat="server" AutoPostBack="true" id="txtDate1" CssClass="right">
</asp:TextBox>
<asp:TextBox runat="server" id="alttxtDate1" CssClass="invis"/>

To Date:

<asp:TextBox runat="server" id="txtDate2" AutoPostBack="True" CssClass="right"></asp:TextBox>

<asp:TextBox runat="server" id="alttxtDate2" CssClass="invis"/>


3. Select the WebPart and convert it to XSLT dataview. We will filter using the two dates on the dataview.

4. Setup the dataview parameters:



5. Setup the filter on the DataView using the parameters from step 4:



6. Add the jquery stuff to make it work:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"
type="text/css" media="all" />

<script type="text/javascript">

if(typeof jQuery=='undefined'){

var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";

document.write('<script src="',jQPath,'jquery.min.js" type="text/javascript"><\/script>');

}

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<SCRIPT type=text/javascript>

$(function() {



$("#txtDate1").datepicker({altField: '#alttxtDate1', altFormat: 'yy-mm-dd'});

$("#txtDate2").datepicker({altField: '#alttxtDate2', altFormat: 'yy-mm-dd'});

});
</SCRIPT>

7. Result:



8. Of course, hide the latter two alt controls:
<style type="text/css">

.invis{

visibility:hidden;

width:30px;

}



</style>

and....Done!

Note: this could be extended to more filters. Just modify the DataView filters criteria....

9 comments:

Anonymous said...

Would it be possible to adapt this so that I can set the start date as 'today' and the end date as 'today' + 60 for example?

Anonymous said...

I've tried and tried to get this to work. Your instructions are simple to follow (thank you) but I guess I am too much a rookie.

I can get the text boxes and calendar to fire but it is as if it does not see my web part. It will not filter it. Also, I found creating a form page and integrating the web part with it to be quite the challenge. Wonder it any issues there....?

Anyway, are there any steps missing that you might have felt a seasoned developer would just know to do? Maybe there is something I am missing.

Anonymous said...

I would like to exchange links with your site yanlinglei.blogspot.com
Is this possible?

Anonymous said...

I'm also trying this, but it's not working for me. I have the 4 text boxes, the parameters, and I've also added the jquery.

But when I enter dates into the first 2 text boxes, nothing happens.

Is there a step missing?

Yanling said...

To the Anonymous posters: I suppose I did missed a step. And that is you hae to set AutoPostBack=true for both txtDate1 and txtDate2 for the event to fire. I will update that on the blog itself.

Anonymous said...

Yanling,
Thanks for updating with the misssing step, but I still can't seem to get this to work.

I noticed that the path to the jQuery is no longer valid. So I just downloaded the latest version, and stored it in a document library on my site. Then updated the paths, to point to these new areas.

Also, where does the jQuery code need to go? I placed it right above the text boxes, is that OK?

When I open the page, I get an error that says Object doesn't support this property or method.

When I put something in the first text box and hit enter, it posts back now but doesn't update the alttext box.

Any ideas?

Yanling said...

Make sure you use the same version, sometimes the objects got changed on the new version. The version i had was still valid I just checked. You can try to down the same version from jquery: http://docs.jquery.com/Downloading_jQuery. you don't have to press enter after date selection, that's what's good about the autopostback.

Anonymous said...

i have used the same format.but its giving me error. The error is:
"Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator"

Anonymous said...

Hello, I'm using a very simillar code, and have found one issue. Basic sharepoint filters in columns header are grayed out. When I type in hardcoded datetime, like:



2007-01-01


Then it is fine, but then 2007-01-01 is {Parameter} then it filters by date but disabled sharepoint filters. Any idea about that?