How to show Ajax callout extender with custom style ?
In this article I have explained about how to create AJAX call out extender with Custom designed format. For example we are display error list using validation summary instead of that we can show small error info pop up near the textbox control using this callout extender with custom design. Learn how to show Ajax callout extender with custom style?
How to show Ajax callout extender with custom style?
Description:
For example I have registration page like this.
Input picture Create one CSS to define style and set back ground color and font etc. like below name it CallOut.css
.customCalloutStyle div, .customCalloutStyle td{
border: solid 1px Black;
background-color: #9C2052;
font-family: Arial;
font-size: 11px;
font-weight:bold;
color:White;
}
call your css in the web page like this :
<link rel="Stylesheet" type="text/css" href="css/CallOut.css"/>
Required field validator
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Name Cannot be blank!" ControlToValidate="TextBox1" Display="None"></asp:RequiredFieldValidator>
Define call out extender WarningIconImageUrl , CloseImageUrl images in the callout extender property and assign that required field validator TargetControlID of call out extender.
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle" />
That's all after run your page call out extender show error information to customer.
Full Source code
CSS Source: (CallOut.css )
This css file placed under css folder
.customCalloutStyle div, .customCalloutStyle td{
border: solid 1px Black;
background-color: #9C2052;
font-family: Arial;
font-size: 11px;
font-weight:bold;
color:White;
}
Client side:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX CallOut Extender</title>
<link rel="Stylesheet" type="text/css" href="css/CallOut.css"/>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<table width="800" align="center" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" height="30">
<b>Registration Details</b>
</td>
</tr>
<tr>
<td height="30" width="50%">
Enter Name
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30" width="50%">
Enter Father Name
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30" width="50%">
Enter Address
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Columns="14"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30" width="50%">
Enter Contact Number
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30" width="50%">
Enter Email Address
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center"height="30">
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
</td>
</tr>
</table>
<%--Normal Required Field Validator--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Name Cannot be blank!" ControlToValidate="TextBox1" Display="None"></asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Father Name Cannot be blank!" ControlToValidate="TextBox2" Display="None"></asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Address Cannot be blank!" ControlToValidate="TextBox3" Display="None"></asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Contact No. Cannot be blank!" ControlToValidate="TextBox4" Display="None"></asp:RequiredFieldValidator><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Email Address Cannot be blank!" ControlToValidate="TextBox5" Display="None"></asp:RequiredFieldValidator><br />
<%--AJAX callout Extender --%>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle" /><br />
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle"/><br />
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="RequiredFieldValidator3" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle"/><br />
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender4" runat="server" TargetControlID="RequiredFieldValidator4" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle"/><br />
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender5" runat="server" TargetControlID="RequiredFieldValidator5" CloseImageUrl="~/css/close.png" WarningIconImageUrl="~/css/excl.png" CssClass="customCalloutStyle"/><br />
</div>
</form>
</body>
</html>
Registration page like this 
Source Code Detail:
Here with I have attached source code download it and try to learn about AJAX Callout extender with custom design.
Front End : ASP.NET
Output:
Conclusion:
I hope my article help to know about AJAX Call out extender.