Wednesday, September 14, 2011

AjaxToolkit:CalendarExtender display problem

I've been using the AjaxToolkit:CalendarExtender for quite a while. Its always worked really well for me... until today.  I added it to a site and the header was not displaying properly.  The month name and the next arrow in the header were not there, only the previous arrow displayed in the calendar header.

As I saw in many posts, the cause is a CSS conflict.  Sure enough, in the designer's CSS, he had a style defined for all div tags that was messing up the calendar header.  I think it was a combination of a position:relative and a display:block that caused the problem.  I tried everything I could think of to fix it without having to modify the designer's CSS file.  I gave the calendar its own class and tried to override the div settings.  I tried defining styles for .ajax__calendar_header.  Couldn't get anything to work for two hours.  I never found a solution for the CalendarExtender, but I did find an alternative.

After doing a search for "javascript calendar date picker", I found the Tigra Calendar.  There is a live demo on the page linked to there.  It looks better than the CalendarExtender and it was even easier to implement.  No AjaxControlToolkit.dll is needed, just a .js file and a .css file.  Their examples use an HTML input control as the target for the calendar, but I found that it worked just as well with an asp:TextBox control.  And its free!  They do have some nice features in the paid version, and that's only $29, so I could definitely see using the paid version on some project in the future.  Particularly for the ability to restrict to certain dates.  Very glad to have found this calendar.

Monday, September 5, 2011

CustomValidator doesn't run / execute / fire

This problem drove me nuts for a while the other day.  I had a CustomValidator on my page that had some client validation code and it was not running.  the page just kept validating successfully even though the validation should have failed.  The issue was that I had set the ControlToValidate attribute of the validator to one of the form fields on my page, and that field was blank, so the validator thought that it didn't need to run since no value was provided.  The field was only required if another field had a certain value, that was the point of the validator.  So I couldn't add a RequiredFieldValidator to the control too.

The solution turned out to be just removing the ControlToValidate attribute.  That attribute is not required for the CustomValidator.  Without that attribute set, the validator runs any time the form is submitted.  And you can still display a potential error message next to whichever control you like just by placing the CustomValidator next to that control on the page.