.Net, ASP.NET, DataList, DatePicker, HTML, JavaScript, JQuery, Programming, UpdatePanel, WebForms

Setting a Time Form Field with a JQuery DatePicker with an ASP.NET DataList in an UpdatePanel

Sometimes you will want to do something very specific on a Web page using a combination of popular technologies. However the interaction of client and server-side languages such as JQuery and ASP.NET can become confusing, especially when the server side language starts adding client-side functionality such as through an UpdatePanel control.

In this article I’m going to review a very specialized case. Here are the key points that I want the code to handle:

  1. I have an ASP.NET DataList that is showing rows of information.
  2. One column of repeating information in the DataList contains a separate Date and Time component
  3. The footer of the DataList is being used to add new rows of information, including a Date and a Time field
  4. The editable time field should display a JQuery DatePicker widget
  5. When a date is selected on the JQuery DatePicker widget, the current time should be set to a separate text field that is beside the Date field
  6. The DataList is running inside an UpdatePanel control to only refresh the DataList when Server communications happens
  7. The DataList has an edit button which the user can press to make a row editable. This involves a refresh of the DataList so that JQuery has to know to re-attach the DatePicker control to the newly editable date field

This is a lot of functionality to cover in one article and I hope it is clear for you to understand how I want the JQuery to interact with the ASP.NET. To further explain things I will give some example code of both the JQuery and the markup tags of the DataList, and I will explain how to address the requirements step-by-step.

Before I start into in-depth explanations in this article, I’d like to mention that if you are interested in reading more about ASP.NET, please check out my series of articles covering ASP.NET development. I also have written a very interesting series of articles about using JQuery to add functionality to your pages that is worth taking a look at.

Continue reading “Setting a Time Form Field with a JQuery DatePicker with an ASP.NET DataList in an UpdatePanel”

ASP.NET, C#, DataList, DatePicker, HTML, JavaScript, JQuery, Programming, UpdatePanel, VB.NET, Web Development, WebForms

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.

Continue reading “Using a JQuery DatePicker with an ASP.NET DataList and UpdatePanel”