Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Interactive Pages
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: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>