Return to the menu Select another DES Module

Demonstrates how to set the overall appearance, including header and footer

Overall appearance

You often establish a border, width, and background color on the outer container. Edit these characteristics with the style sheet class "DESValSummary", which is declared in the [web app]\DES\Appearance\Validation\Validation.css file. The control also has properties which handle the same styles, such as Width and BackColor.

Note: if you do not establish the width, it will default to the width of the page.

Header

The header provides text and an optional image before the error messages. Most of the time it appears above the error messages. But you can place it to the left of the messages when you use the “paragraph style” for the error messages.

To add text to the header, set it in the HeaderText property. It accepts HTML, so you can create additional formatting. It also allows the "{COUNT}" token to show the number of errors.

If you want an image to appear in the header, set its URL in the HeaderImageUrl property. By default, the image appears to the left of the header text in separate columns. You can customize the relationship between text and image with the HeaderElementPositions property.

If you want to show a single message without the individual error messages, set up the HeaderText to that message. Then set DisplayMode to None.

The header uses the style sheet class "DESValSummaryHeader" to adjust its appearance. It is declared in the [web app]\DES\Appearance\Validation\Validation.css file.

Footer

The footer provides text and HTML that appears after the error messages.

To add text to the footer, set it in the FooterText property. It accepts HTML, so you can create additional formatting. It also allows the "{COUNT}" token to show the number of errors.

The footer uses the style sheet class "DESValSummaryFooter" to adjust its appearance. It is declared in the [web app]\DES\Appearance\Validation\Validation.css file.

See DisplayMode for the formatting rules of the error messages.

Controls

Click Submit to show the ValidationSummary controls.

First Name: Required
Last Name: Required
Postal Code: Required

Example 1

Header and footer are shown. The Footer has the {COUNT} token.

Example 2

Header has an image to the left of the text. It uses an alternative style sheet class for the overall container.

Source Code (C#)

<script runat="server">
   protected void Button1_Click(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save your data here
      }
   }
   
</script>

<style type="text/css">
.AltValSummary
{
   background-color: #e9e9e9;
   border : thin solid black;
   width : 400px;
}
</style>
Click Submit to show the ValidationSummary controls.<br/><br/>
First Name: <asp:TextBox ID="TextBox1" runat="server" />
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="TextBox1"
   ErrorMessage="Required" SummaryErrorMessage="First Name is required">
</des:RequiredTextValidator>
<br/>
Last Name: <asp:TextBox ID="TextBox2" runat="server" />
<des:RequiredTextValidator ID="Requiredtextvalidator2" runat="server" ControlIDToEvaluate="TextBox2"
   ErrorMessage="Required" SummaryErrorMessage="Last Name is required">
</des:RequiredTextValidator>
<br/>
Postal Code:<asp:TextBox ID="TextBox3" runat="server" />
<des:RequiredTextValidator ID="Requiredtextvalidator3" runat="server" ControlIDToEvaluate="TextBox3"
   ErrorMessage="Required" SummaryErrorMessage="Postal Code is required">
</des:RequiredTextValidator>
<br/>
<des:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"></des:Button>
<hr/>
<br/>
<h2>Example 1</h2>
Header and footer are shown. The Footer has the {COUNT} token.<br/>
<des:ValidationSummary ID="ValidationSummary1" runat="server" 
   HeaderText="Fix the errors" FooterText="{COUNT} errors shown" />
<br/>
<h2>Example 2</h2>
Header has an image to the left of the text. It uses an alternative style sheet class for the overall container.<br/>
<des:ValidationSummary ID="ValidationSummary2" runat="server" 
   HeaderText="Fix the errors" HeaderImageURL="~/DES/Appearance/Validation/BigValErrorIcon2.GIF"
   HeaderElementPositions="ImageBeforeText" HeaderImageColumnWidth="20px"
   FooterText="{COUNT} errors shown" CssClass="AltValSummary" />

Return to the menu Select another DES Module