
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:
TextBox2:
TextBox3:
ASP.NET Syntax for this demo
TextBox1:
<des:TextBox id="TextBox1" runat="server"></des:TextBox>
<des:RequiredTextValidator id="RequiredTextValidator1" runat="server"
ControlIDToEvaluate="TextBox1" ErrorMessage="Required"
ShowRequiredFieldMarker="True">
<ErrorFormatterContainer>
<des:TextErrorFormatter></des:TextErrorFormatter>
</ErrorFormatterContainer>
</des:RequiredTextValidator>
<br>TextBox2:
<des:TextBox id="Textbox2" runat="server"
ChangeMonitorGroups="*"></des:TextBox>
<br>TextBox3:
<asp:TextBox id="TextBox3" runat="server"></asp:TextBox>
<des:NativeControlExtender id="NativeControlExtender1" runat="server"
ControlIDToExtend="TextBox3"></des:NativeControlExtender>
<br>
<des:Button id="Button1" runat="server" Text="Submit"></des:Button>
<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"></des:Button>
<input type="reset" value="Reset" />
<des:PageManager id="PageManager1" runat="server">
<ChangeMonitor Enabled="True"></ChangeMonitor>
</des:PageManager>
|