Using a JQuery DatePicker with an ASP.NET DataList and UpdatePanel

When you are developing a new Web form there are a number of useful technologies that you can use to enhance the functionality of the form. Today I will review combining an ASP.NET DataList control with a JQuery DatePicker widget, and also with an ASP.NET UpdatePanel. The complexity in this combination of controls comes into play with the interplay of the client side JavaScript along with the partial page reloading of DataList control in an UpdatePanel.

The DataList and UpdatePanel

You can use an ASP.NET DataList control to create an editable grid of information on your form page.  By nature the DataList provides a read-only view of your data along with a button to edit a row. Once you click the edit button, the DataList is re-bound to its datasource, and the selected row is presented to the user in an editable form. In this case it means that your JQuery will not need to associate a DatePicker with a TextBox in your DataList until the user selects to edit a particular row.

The default edit functionality of a DataList is great, but one problem with the grid is that when you code a button to edit/insert/delete a row in your list, the entire page does a post-back. This is often not desirable behaviour, especially if you have a larger form, since it will result in a flicker from the page reload and then the page jumping back to the top.

The simplest way to fix this behaviour is to encapsulate your DataList in an UpdatePanel. The UpdatePanel will stop the entire page from being reloaded when a DataList button is clicked since the UpdatePanel marks sections of your Web form to communicate with the Web server asynchronously.

The JQuery DatePicker Widget

JQuery has a great selection of widgets that are useful throughout a Web form. In this example I will explain adding a JQuery Calendar widget to a repeating TextBox control found in an ASP.NET DataList. This is a feature that adds a lot of value to a Web form and is quite easy to do. However since by default JQuery hooks up events when the Web page is first loaded, page elements that are reloaded asynchronously via an UpdatePanel will not be re-associated with JQuery events. You will need to specially tell the JQuery engine to re-associate the DatePicker event handling with reloaded TextBox controls in the DataList after an asynchronous event has taken place.

Setting Up Your JQuery Function

So for starters you have to hook up your JQuery function to the repeating TextBox controls in your UpdatePanel encapsulated DataList.

Due to the asynchrounous nature of the UpdatePanel control, you will need to specifically tell your JQuery code that it needs to run even after your UpdatePanel does its communication with the Web server and subsequent control re-rendering. This differs somewhat from a standard JQuery command since you will need to add the following line:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

This line tells JQuery that it needs to activate the DatePicker widget in the UpdatePanel/DataList after an asynchronous postback has taken place. If you leave this line out you will quickly see that the standard way of hooking up the DatePicker widget will not work after the DataList has posted itself back. Note, however that if you want the JQuery engine to hook up default behaviour to controls in the UpdatePanel before the panel has refreshed its contents, then you should not use the line above to do so. Instead you will need to do a traditional and separate JQuery call to handle the un-refreshed UpdatePanel contents.

A second useful function is JQuery’s ability to hook up the DatePicker widget in bulk based on a class that has been assigned to the relevant TextBox controls. Before the convenience of JQuery existed this sort of function would have required some fancy footwork to apply to each control, but now  JQuery provides the ability to address controls in bulk based on their CSS class.

In the code below, I show how each TextBox control is hooked up to a DatePicker control by the TextBox’s CSS class called CssUpdateDt using the syntax:

 $('.CssUpdateDt').datepicker(

Below I’m providing the full JQuery function to use to associate reviewed some of the details of the JQuery needed to hook up a DatePicker widget to multiple TextBox controls in a DataList, here is the full function to use:

$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.CssUpdateDt').datepicker({ dateFormat: 'yy-mm-dd' });
}
});

Markup Example of the ASP.NET DataList in an UpdatePanel

Now that I have reviewed the JQuery needed to hook up a DatePicker widget to each TextBox in a DataList, I’ll go over the markup to add an imaginary DataList and UpdatePanel combination. If you have worked with ASP.NET WebForms before then this markup should be quite familiar.

For starters we add an UpdatePanel control imaginatively named UpdatePanel1. Also note that you will need to add a ScriptManager to the start of your page, right after the <body tag (I won’t show the markup for this since you can simply drag and drop this control from your ToolBox to your Web form in Visual Studio). At this point you should have a functional UpdatePanel control.

Now you can add a DataList to your UpdatePanel (naturally within the UpdatePanel’s ContentTemplate). You can then bind your new DataList to a DataSource whichever way you prefer.

From the code below you can see that I have added a TextBox control to the EditItemTemplate of the DataList. This control is intended to become visible when a user selects a row of the DataList to edit, at which point the JQuery DatePicker widget needs to kick in to help the user to select a calendar date. Since the transition from the DataList’s ItemTemplate view to the EditItemTemplate view involes an asynchronous postback of the UpdatePanel, the JQuery DatePicker needs to be told to re-add itself to the refreshed page elements. As I have explained in the JQuery section above, this is done using a special command that lets the JQuery engine know what needs to happen.
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>

<asp:DataList ID=dlMyDataList runat=server GridLines=Both CssClass=GridFieldLabel CellPadding=0 CellSpacing=0 s OnEditCommand=” dlMyDataList_EditCommand”>
<EditItemTemplate>
<td valign=”top”>
<asp:TextBox ID=”txtDt” runat=”server” Text=<%# DataBinder.Eval(Container.DataItem, “SomeDt”) %> Width=”70″ CssClass=” CssUpdateDt ” ></asp:TextBox>