Calendar Extender and TextBox set to ReadOnly in C#

Question

User284285477 posted

Hi All,

I was able to convert an older application to use AJAX, now the nitty-gritty stuff.

I placed a TextBox on the screen, then put an image on, then placed the Calendar Extender control on.  By clicking the Image (using the PopupButtonID), the calendar pops-up.  I was able to put together my own little CSS file and it looks great.  Select the date, and the TextBox is populated with the date.  Nice!!!  Click to get the report based on the date(s) entered, and *poof* broken.  There's a validation control that checks to see if the date was set.

if (DateFrom.Text == "---" || DateTo.Text == "---")

The issue really doesn't appear to be with this check.  (Note: the initial value of the TextBox is set to '---' just to highlight what's in the TextBox for the user).  When I went into Debug, and added the DateFrom.Text and DateTo.Text values, they would always be displayed as their default value of "---"  in the watch list.  It couldn't pick up the new values that were set by Calendar Extender control.

However, that issue only appears if I set the TextBox to ReadOnly = true, or Enabled = false.  If the TextBox is left as a typical TextBox, Enabled and not ReadOnly, then it all works fine.   But doing that raises other issues... if the user enters values into the TextBox manually, and it's intended to be a DateTime value, then it requires more validation of the values.

Ideally, I should be able to use the Calendar Extender control, set the TextBox to ReadOnly, so the user cannot put an invalid value in the box, and they can get their report.

Does anyone have an idea how I can get it to work the way I want?

 

Thanks,
Meister1867

 

Answer 1

User-2005691517 posted

 When you are setting the date in a readonly textbox using the Calendar Extender, you should be able to read it on the server. The value from a disabled control won't be posted though.

Can you try once more with a readonly textbox?

In case you still have the problem, please post the relevant code. 

Answer 2

User284285477 posted
<?xml:namespace prefix = asp /><asp:Image class=st id=" Ok... here's some code.  This scenario doesn't work the way I'd like though. 
 On the aspx page is this control.  The ScriptManager has already been placed:

<asp:TextBox ID="DateFrom" runat="server" Width="100px" ForeColor="Black" ReadOnly="True">---</asp:TextBox>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="DateFrom" PopupButtonID="Image2" Format="MMM d yyyy" CssClass="MyCalendar">
</cc1:CalendarExtender>

In the code itself, I have this function... it has been modified to reflect what I said in the original post though.

//Check that the dates are fine
try
{
if (DateFrom.Text == "---" || DateTo.Text == "---")//Need two dates
{
Literal1.Text = "<Script lang=JScript> alert('You must enter a From and To date for this report.');</Script>";
return false;
}
else if (Convert.ToDateTime(DateFrom.Text) > Convert.ToDateTime(DateTo.Text))//Must be in order
{
Literal1.Text = "<Script lang=JScript> alert('Your [To] date must be after your [From] date.');</Script>";
return false;
}
else//Dates are okay
{
return true;
}
}
catch (FormatException err)
{
Literal1.Text = "<Script lang=JScript> alert('Your Date Format contains invalid values, please check that your date is valid.');</Script>";
}
finally
{
//  nothing here right now
}
return false;

 The issue is this... when the code behind is called, and the dates are checked to see if the user has entered dates out of order with each other (the DateTo date being before the DateFrom date), then I can never get to the 'else if' statement, because the code behind can only see that the values for DateFrom is "---" even though the Calender Extender control was used to enter a valid date.

But, as mentioned before, if I remove the ReadOnly attribute from the control, then the code behind is able to properly read the value which was placed in the TextBox (that's why the try...catch was put in, just in case the user enters an invalid date value causing an exception).

I'll keep digging into this one for a bit.  The try...catch statement is an 'okay' work-around' but it would be better if the user is restricted to using the Calendar control only.

 Thanks for any responses,
Meister1867

 

</asp:Image>

Answer 3

User284285477 posted

Ok... I did some more digging and here's what I came up with.

If you go to this link http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.readonly.aspx it will have this one point:

 

Important:
The Text value of a TextBox control with the ReadOnly property set to true is sent to the server when a postback occurs, but the server does no processing for a read-only text box. This prevents a malicious user from changing a Text value that is read-only. The value of the Text property is preserved in the view state between postbacks unless modified by server-side code.

So... this issue I'm experiencing is a design issue within .NET itself.  The work-around is towards the lower part of the page:
Setting the readonly atrribute as stated here will not cause any serverside processing to occur. If you need the value in the textbox to be available serverside then use the attribute

contentEditable="false" 

rather than read only. This only works for IE browsers however.

This results in my aspx code changing to:

<asp:TextBox ID="DateFrom" runat="server" Width="100px" ForeColor="Black" contentEditable="false">---</asp:TextBox>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="DateFrom" PopupButtonID="Image2" Format="MMM d yyyy" CssClass="MyCalendar">
</cc1:CalendarExtender>

It ain't pretty, but I'll take it.  Note that while you're working in Visual Studio, it will say that the contentEditable tag is not a valid ASP.NET tag, but it inserts it into the aspx html code.  It's only good for IE anyway.  The application is being used in-house, and our standard browser is Internet Explorer.  But if a user uses FireFox/Mozilla/Netscape/etc..., the try...catch block will still catch any issues of an invalid date being entered.

 

Answer 4

User-1438666058 posted

 I don't know if this is still an issue for you but there is a solution that works across the browsers. Put onKeyPress = "javascript: return false;" onPaste = "javascript: return false;" in your textbox. That way, even the textbox is enabled, the user will not be able to modify the data.

Answer 5

User-376242 posted

Just remove the readonly attribute from Property window and add the set the readonly attribute to true a runtime.. It will Work

Textbox1.Attributes.Add("readonly","true");

 

This will work and you will get the value of the textbox after Postback.

Answer 6

User2105407822 posted

 Snehal.patel solution didn't work with me. I managed to do it with the help of the hiddenfield control.

I store the value also in the hiddenfield then at server-side assigned its value to the textbox

Answer 7

User-156791067 posted

HI there - the Solution of kartiksehgal worked great - Thanks

-qysan

Answer 8

User1369480294 posted

I also added the 

onCut="javascript:return false;"

to kartiksehgal's solution.

 

Thanks

Answer 9

User139473619 posted

When we are clicking the image the focus is not there in the text box.

So instead  just add a image and call a javascript function- onclick event. The function should just focus on the textbox.

say for ex -

document.getElementById("ctl00_ContentPlaceHolder1_txtDate").focus();

The calender extender automatically works fine ;-)

Answer 10

User1414178881 posted

I face the same problem and fixed it like this:

Textbox1.Attributes.Add("readonly","readonly");

It's working 100%

Answer 11

User-1438666058 posted

When I set the text box attribute to readonly, any changes I make to the textbox value via the calendar, do not get reflected in the code-behind during post back. The values only show up on the screen. Hence all the other options.

Answer 12

User1414178881 posted

When you use :Textbox1.Attributes.Add("readonly","readonly");

You shouldn't use the readonly (the one you find in properties).

It will work 100%,I've tried it my self with calendarExtender.

Answer 13

User-686968075 posted

The same solution does not work in case the user navigates to the control using tab and the user uses backspace.... Backspace for some reason does not kick off the OnKeyPress Event. Setting the ready only property to true during runtime worked fine for me

Answer 14

User-276214393 posted

 When you are setting the date in a readonly textbox using the Calendar Extender, you should be able to read it on the server. The value from a disabled control won't be posted though.

Can you try once more with a readonly textbox?

In case you still have the problem, please post the relevant code. 

Great tip !!!

Answer 15

User-509069253 posted

Yes. This suggestion worked for me too ! Thanks

Answer 16

User1174110592 posted

When you use :Textbox1.Attributes.Add("readonly","readonly");

You shouldn't use the readonly (the one you find in properties).

It will work 100%,I've tried it my self with calendarExtender.

Best Regards,

Ala'a Alnajjar

When you use :Textbox1.Attributes.Add("readonly","readonly");
You shouldn't use the readonly (the one you find in properties).
It will work 100%,I've tried it my self with calendarExtender.

By
Ala'a Alnajjar

-----------------------------------

Above is working fine.. its working 100%.. am too test and updated in production server.

Thanks Ala's.. Great work u done.

Thanks & Regards,

S. Siva Kumar