ChangeMonitor
The ChangeMonitor watches for edits in the form and changes the appearance of buttons
and other fields upon the first detected edit.
The classic case is to have a disabled OK button that gets enabled as you start
typing. Another case is to show a message like “This form has changed” in a label.
Both of these cases are handled.
Here are its features:
- Watches for the first edit made by the user. Prior to that, it establishes an initial
state of selected buttons and other controls. Buttons are usually disabled. After
the edit, that state is changed to communicate to the user that an edit has occurred.
Note: It does not know the original value of controls. So if the user undoes their
edit, the state does not revert back.
- The state of the ChangeMonitor is preserved through postbacks and callbacks. So
once the page is edited and the user posts back, as the page is redrawn it still
knows that it has been edited and sets buttons and other fields accordingly. Yet,
if the page is posted back and is found to be entirely valid, you can have it draw
the page again as if there were no edits. This helps when the user is entering multiple
records with one page.
- DES's Enhanced Buttons automatically respond to the ChangeMonitor.
- DES data entry controls (textboxes, MultiSegmentDataEntry, Calendar, etc) automatically
notify the ChangeMonitor of changes. While most controls signal that they are changed
with their DHTML onchange or onclick events, you can have them signal a change as
the user makes an edit using the keyboard.
- Any data entry control with an attached validator (from the DES Validation Framework)
automatically notifies the ChangeMonitor of changes.
- All other data entry controls can notify the ChangeMonitor simply by assigning
the NativeControlExtender to them.
- A reset button (<input type='reset' />) reverts buttons controls to their
unedited appearance.
- When using different Validation Groups, the page is usually separated into segments
with its own buttons. ChangeMonitor follows the Validation Groups. It will only
enable the button associated with the validation group that was changed.
- You can define an alternative grouping to Validation Groups. For example, while
you have several Validation Groups on the page, you want all buttons to be enabled.
- You can change the state of any other control by using the FieldStateController
with the ChangeMonitorCondition class in its Condition property. It will update
the other control as the ChangeMonitor updates the state of buttons.
- The ChangeMonitor can call your own javascript code so you can take other actions
as changes are made.
- DES's Buttons setup to show a confirmation message can elect to show that confirmation
message based on the state of the page: edited or not.
Demo
TextBox 1 has a validator which notifies the ChangeMonitor.
TextBox 2 lacks a validator so it uses its own ChangeMonitorGroups property to notify
the ChangeMonitor.
TextBox 3 is a native TextBox which lacks the ChangeMonitorGroups property. It also
has no validators setup so it uses the NativeControlExtender to notify the ChangeMonitor.
The ChangeMonitor is setup on the Submit button to enable it. It leaves the Cancel
button enabled and causes the Cancel button to show a Confirmation message if changes
occurred.
Use the Reset button to start over.
TextBox1:
Required
TextBox2:
TextBox3:
ASP.NET Syntax for this demo
TextBox1:
<des:TextBox ID="TextBox1" runat="server" />
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server"
ControlIDToEvaluate="TextBox1" ErrorMessage="Required"
ShowRequiredFieldMarker="True" />
<br/>
TextBox2:
<des:TextBox ID="Textbox2" runat="server" ChangeMonitorGroups="*" />
<br/>
TextBox3:
<asp:TextBox ID="TextBox3" runat="server" />
<des:NativeControlExtender ID="NativeControlExtender1" runat="server" ControlIDToExtend="TextBox3" />
<des:Button ID="Button1" runat="server" Text="Submit" />
<des:Button ID="Button2" runat="server" Text="Cancel"
ChangeMonitorEnables="No" ChangeMonitorUsesConfirm="Changed"
ConfirmMessage="You have edited this page.{NEWLINE}Are you sure that you want to cancel?"
CausesValidation="False" />
<input type="reset" value="Reset" />
<des:PageManager ID="PageManager1" runat="server">
<ChangeMonitor Enabled="True" />
</des:PageManager>