Tuesday, December 30, 2008

Tip: CalendarExtender In Update Panel with ReadOnly TextBox

Scenario:
From time to time we want to build a date selection in a web form using the Ajax Control Toolkit's Calender Extender and to set a text box that accepts a new date everytime a user chooses a new date to ReadOnly mode so that user cannot modify the text box with unintended date format.  Most of the time, we want to put it inside an UpdatePanel so that only partial of the page is updated. The problem is, the TextBox's TextChanged event if you enable it, it will not fire if the user makes a date selection and changes the content of the text box.

Solution:
The solution to this problem is to bind the UpdatePanel "Load" event to a function. In this case, any changes in the text box content will trigger the UpdatePanel event.
In the function what we can do is to check the "__EVENTTARGET" returned from the "Request" object. For example, the following code checks whether the postback is caused by the myTextBox text box.

        protected void UpdatePanel2_Load(object sender, EventArgs e)
        {
            if (Request.Params["__EVENTTARGET"] == myTextBox.ID)
            {
                  //DO something
            }
        }

2 comments:

Anonymous said...

This doesnt work...

Anonymous said...

I did:

Protected Sub UpdatePanel1_Load(sender as Object, e as EventArgs) Handles UpdatePanel1.Load

If IsPostBack Then
//Do stuff
End If
End Sub

And that works.