RadWindow, RadDatePicker and validation issue

[Brad]

I have a RadWindow that opens up containing another page from the site.

This page has a form on it with several standard asp.net / HTML input controls and a RadDatePicker.

On postback I validate the inputs. Several of the inputs get checked but only one of them is giving me an issue. The RadDatePicker.

For this example lets assume that a dropdown list does not have a selection, and the datepicker has an invalid date entered.

In either of these cases I construct and Alert() message that is shown to the user and some jQuery that will apply a special css style to show the inputs that have a problem.

The jQuery gets assembled during the validation like this.

 

// in the case that a contact has not been selected from the Contacts dropdown list
sJQuery += " $('#drpProspectContact').addClass('forminputerror'); ";

// In the case that the RadDatePicker date does not have a valid value in it.
sJQuery += " $('#dpForecastCloseDate_dateInput_text').addClass('forminputerror'); ";

Note: forminputerror puts a red line around the border and colors the background of the inputs.

The jQuery above has been tested with Firebug and works on both of the inputs in question.

At the end of the validation method I do this.

if (IsProspectError)
                {
                    String ErrorScript = "alert('" + sErrors + "'); " + sJQuery;
                    ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "", ErrorScript, true);
                    return false;
                }
                else
                {
                    return true;

                }

When the page is refreshed, an Alert box appears and I can see in the background that both of the inputs in question have the error style applied.

However, as soon as I hit the OK button on the alert box, the DatePicker reverts to a version with no error style applied. This happens before my eyes as the Red border etc is reverted back to the default state of the DatePicker

I have attached two images. One before the OK button is hit, and one after.

It's like the RadDatePicker is loaded after the rest of the page loads, or something, but that does not make sense either as the control is there to have a style applied while the alert box is showing. And the alert box is only there after postback.
How can closing the alert box remove a style from the RadDatePicker?

Finally I have tried RegisterStartupScript() and RegisterClientScriptBlock(). Made no difference.

[Brad]

The next day here and I am still trying to work this out.

Using Firebug I am able to apply the error css directly to the form elements (differnt form, same issue) after some fancy jQuery to select from the RadWindows iFrame DOM tree.  Note that the code I put into the page in my first post above, does not need this 'pathing' to a different DOM tree. This is just a Firebug thing.

$('#drpActivityType', $('iframe').get(0).contentDocument).addClass('forminputerror');

$('#radDateStart_dateInput_text', $('iframe').get(0).contentDocument).addClass('forminputerror');

In the two screenshot below you can see the result of these 2 lines of jQuery, then you can see what happens after I simply roll my mouse over the RadDatePicker. The style is removed.

[Iana Tsolova]

Hello Brad,

RadInput has different styles for its different states, like hover, focus, enabled, readonly, etc. All are listed in the below article:
http://www.telerik.com/help/aspnet-ajax/input-styles.html

So when you move your mouse over/out of it, the proper styles are applied with javascript. And thus the styles you previously applied are overriden. You can handle the OnMouseOver, OnMouseOut, OnFocus, OnBlur and OnValueChanged client-side events to maintain the input state.

Kind regards,
Iana Tsolova
the Telerik team