ASP.NET AJAX Control Toolkit Demos v20.1.0.0

ValidatorCallout Sample
Ajax Control Toolkit
ValidatorCallout Demonstration
Phone Number:

ValidatorCallout Description
ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators.
ValidatorCallout Properties
  • CloseImageUrl - The path to a custom close image
  • CssClass - Name of the CSS class used to style ValidatorCallout
  • HighlightCssClass - A CSS class to apply to an invalid field
  • OnHide - Generic OnHide animation for the ValidatorCallout extender
  • OnShow - Generic OnShow animation for the ValidatorCallout extender
  • PopupPosition - Indicates where the ValidatorCallout popup should appear relatively to the control to validate
  • WarningIconImageUrl - The path to a custom warning icon image
  • Width - The width of the callout
ValidatorCallout Known Issues

The callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation. Even after a post-back the callout will display when the form is re-validated when a postback is attempted again.

ValidatorCallout Theming
You can change the look and feel of the ValidatorCallout using the ValidatorCallout CssClass property. The ValidatorCallout has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\ValidatorCallout\ValidatorCallout.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ValidatorCallout control can be styled accordingly. For example, if the CssClass property was set to "CustomValidatorCalloutStyle", this is how the css to style the border and background color would look:
.CustomValidatorCalloutStyle div, 
.CustomValidatorCalloutStyle td { 
    border:solid 1px blue; background-color: #ADD8E6; 
ValidatorCallout Css classes
  • .ajax__validatorcallout_popup_table: The popup table.
  • .ajax__validatorcallout_popup_table_row: The popup table row.
  • .ajax__validatorcallout_callout_cell: The callout cell.
  • .ajax__validatorcallout_callout_table: The table in the callout cell.
  • .ajax__validatorcallout_callout_table_row: The callout table row.
  • .ajax__validatorcallout_error_message_cell: The error message cell.
  • .ajax__validatorcallout_icon_cell: The warning icon cell.
  • .ajax__validatorcallout_close_button_cell: The close button cell.
  • .ajax__validatorcallout_arrow_cell: The arrow cell.
  • .ajax__validatorcallout_innerdiv: Inner div of a cell. Used in the close button cell and the arrow cell.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.