Recently I have been working with AJAX to create some intelligent controls.
I have created a Format selector which looks something like the following…
The purpose is to allow users to select from a predefined list of formats.
As it is done in Ajax I wanted to use the UpdateProgress control to show a nice “Updating” animated gif. I implemented that but it was a pretty poor solution as users could still interact with the controls whilst it was updating.
Enter the UpdatePanelAnimationExtender. I Played around with this and got the system doing a fade animation just following the example in the samples. This worked fine. But the user could still interact with the controls so I put in the following code to disable the controls onupating and enable the controls onupdated.
[html]
<Parallel duration="0">
<EnableAction AnimationTarget="btnOk" Enabled="false" />
<EnableAction AnimationTarget="lstFormatTypes" Enabled="false" />
<EnableAction AnimationTarget="lstFormatCodes" Enabled="false" />
<EnableAction AnimationTarget="txtDecimals" Enabled="false" />
<EnableAction AnimationTarget="imgUp" Enabled="false" />
<EnableAction AnimationTarget="imgDown" Enabled="false" />
</Parallel>
[/html]
This is it in action after using the format type drop down:
This seemed to work fine until I started fiddling with the visibility of the controls in the postback methods being fired on autopostback of the drop downs. Example, if someone chose a format type of “Date” there is no need for the decimals text box, so I was setting the Panel that contained that control (and headings) to visible = false.
The outcome of this was when switching to date the animation would work fine, but when switching back to currency it would appear to hang with the animation remaining opaque but some controls enabled. I assume this was due to the fact that txtDecimal, imgUp and imgDown were no longer visible and therefore not accessible via javascript.
The fix was to change the EnableAction to be conditional like so:
[html]
<Parallel duration="0">
<EnableAction AnimationTarget="btnOk" Enabled="false" />
<EnableAction AnimationTarget="lstFormatTypes" Enabled="false" />
<Condition ConditionScript="$get(‘lstFormatCodes’) != null">
<EnableAction AnimationTarget="lstFormatCodes" Enabled="false" />
</Condition>
<Condition ConditionScript="$get(‘txtDecimals’) != null">
<EnableAction AnimationTarget="txtDecimals" Enabled="false" />
</Condition>
<Condition ConditionScript="$get(‘imgUp’) != null">
<EnableAction AnimationTarget="imgUp" Enabled="false" />
</Condition>
<Condition ConditionScript="$get(‘imgDown’) != null">
<EnableAction AnimationTarget="imgDown" Enabled="false" />
</Condition>
</Parallel>
[/html]
With the conditional settings I am saying ONLY if the control exists set the enabled status.
Problem solved.
Cheers
Post Script
The other easier way to get around this would be to put a panel around all the controls, and just enable/disable the panel. This removes the issue and is a lot less code 🙂