CSS
========================================
body
{
scrollbar-arrow-color:#333333;
scrollbar-face-color:#E4E6E9;
scrollbar-highlight-color:#333333;
}
.backColorDark
{
background-color :#D4D4D4;
}
.backColorlight
{
background-color:#7686a7;
}
.foreColorDark
{
color:#D4D4D4;
}
.headerBottomBorder
{
border-bottom : 2px solid #D4D4D4;
}
.Hdrtext
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight: bold;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:5px 0px 5px 0px;
margin-top:5px;
margin-bottom:5px;
border-bottom:5px solid #fff;
/*border:solid 1px #000;*/
}
.Hdrtext_BreadCrumb
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight:normal;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:5px 0px 5px 0px;
margin-top:5px;
margin-bottom:5px;
border-bottom:5px solid #fff;
/*border:solid 1px #000;*/
}
.Hdrtext_New
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight: bold;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:3px 0px 3px 0px;
margin-top:3px;
margin-bottom:3px;
border-bottom:3px solid #fff;
/*border:solid 1px #000;*/
}
.HdrtextR
{
background-color : #D4D4D4;
color: white;
font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: right;
}
.Hdrtexthome
{
background-color : #D4D4D4;
color: white;
font-weight: bold;
font-size: 12px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
}
.HdrtextBlack
{
background-color : #D4D4D4;
color: #333333;
font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.aStyle
{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: verdana,Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
}
.labelStyle
{
color: #333333;
font-weight: normal;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.labelStyleB
{
color: #333333;
font-weight: normal;
font-size: 10px;
font-weight:bold;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.loginBorder
{
background-color:#333333;
}
.sessiontimedout
{
border-right: #333333 1px solid;
border-top: #333333 1px solid;
font-weight: bold;
font-size: 11px;
border-left: #333333 1px solid;
color: white;
border-bottom: #333333 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #333333;
}
.txtField
{
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: normal;
font-size: 9px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtFieldWatermark
{
background-color:#E4E6E9;
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: normal;
vertical-align: middle;
font-size: 9px;
height:20px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtFieldAuto
{
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: bold;
vertical-align:middle;
height:20px;
font-size: 10px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtBold
{
border: #666666 1px solid;
font-weight: bold;
font-size: 10px;
background-color: #E4E6E9;
border:1px;
font-family: Verdana,Arial;
padding-top:2px;
padding-bottom:2px;
}
.bold_text_more
{
font-weight: bold;
font-size: 11px;
color: #003366;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}
.normalText
{
font-weight: normal;
font-size: 10px;
color: #333333;
text-align: left;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.linkbutn
{
color: #333333;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 10px;
font-weight: bold;
text-decoration : none;
}
.hdrlinkbutn
{
color: #333333;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration : none;
}
.hdrlinkbutnW
{
color: #ffffff;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration : none;
}
.linkRed
{
color:Maroon;
vertical-align: middle;
font-family: Verdana,Arial;
font-style:italic;
font-size: 10px;
font-weight: bold;
text-decoration : none;
cursor:pointer;
}
.linkbutnwhite
{
color: white;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 10px;
font-weight: bold;
text-decoration : none;
}
.alternateText
{
font-weight: normal;
font-size: 10px;
color: #333333;
text-align: left;
background-color: #F7F6F4;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalText
{
font-weight:bold;
font-style:italic;
font-size: 10px;
color: #333333;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalText1
{
font-weight:bold;
font-style:italic;
font-size: 10px;
color: red;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalTextRed
{
font-weight:bold;
font-size: 10px;
color: red;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.updatePortalBackground
{
background-color:#F7F6F4;
border-top:1px solid silver;
border-bottom:1px solid silver;
height:40px;
}
.noteBackground
{
background-color:#F7F6F4;
border:1px solid silver;
height:28px;
margin-top:8px;
margin-bottom:8px;
}
.noteText
{
font-weight:normal;
font-size: 11px;
color: #333333;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.gridHead
{
background-color: #ccc;
font-weight: bold;
color: Black ;
font-size: 10px;
font-family: Verdana,Arial;
text-align: center;
vertical-align: middle;
margin-top:5px;
margin-bottom:5px;
padding:5px 0px 5px 0px;
}
.gridPager
{
background-color: #D4D4D4;
font-weight: bold;
color: White;
font-size: 10px;
font-family: Verdana,Arial;
text-align: right;
vertical-align: middle;
}
.butText
{
border-right: #003366 1px solid;
border-top: #003366 1px solid;
font-weight: normal;
font-size: 11px;
background-image: url(../../Images/but_bg.gif);
border-left: #003366 1px solid;
color: #003366;
border-bottom: #003366 1px solid;
font-family: Verdana,Arial, Helvetica, sans-serif;
}
.norText
{
font-weight: normal;
font-size: 10px;
color: #333333;
font-family: verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
.HighLightRow
{
background-color:lightgoldenrodyellow;
}
.configPopup
{
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight:bold;
color:#222222;
/*background-image: url(../../Images/graybutton_bg.gif);*/
background-image: url(../../Images/gridHeaderbg.gif);
border: #D4D4D4 1px solid;
height:20px;
}
.configPopupClick
{
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight:bold;
/*color:#000000;*/
/*background-image: url(../../Images/button_bg.gif);*/
color:#ffffff;
background-image: url(../../Images/bg_subheader.png);
border-bottom: #D4D4D4 0px solid;
height:20px;
}
.configPopupArrow
{
height:10px;
background:url(../../Images/sub_d.gif);
background-repeat:no-repeat;
background-position:top;
}
.configPopupNoArrow
{
height:10px;
}
.calendar
{
TABLE-LAYOUT: fixed;
BACKGROUND-IMAGE: url(../../Images/cal.gif);
WIDTH: 16px;
CURSOR: hand;
BORDER-TOP-STYLE: none;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
HEIGHT: 16px;
BACKGROUND-COLOR: transparent;
BORDER-BOTTOM-STYLE: none;
}
#progressBackgroundFilter
{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=30);
opacity:0.5;
z-index:10000;
}
#processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:10001;
background-color:#fff;
border:solid 1px #000;
}
/*
Date Added : 21-Apr-2007
Author : Subbarao.TTV
Module : MenuTempate.cs
These classes are used generate dynamic menus.
*/
.imidiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
border-bottom: 1px solid #ccc;
font-weight:bold;
font-size: 10px;
font-family: Arial;
vertical-align: middle;
z-index: 0;
}
.imidiv ul li{
background: #D4D4D4;
position: relative;
border-left-style:none;
border-right-style : none;
vertical-align :middle;
border-bottom : 1px;
}
/*Sub level menu items */
.imidiv ul li ul
{
margin: 0;
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
border-left: 1px solid #ccc;
visibility: hidden;
z-index: 0;
vertical-align :middle;
}
/* Sub level menu links style */
.imidiv ul li a{
display: block;
cursor:hand;
/*
font-weight: bold;
font-size: 10px;
*/
font-weight: normal;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
/*background: #D4D4D4, #fff;*/
background: #D4D4D4;
padding: 0px 5px;
border: 1px solid #ccc;
border-bottom: 1px;
border-right:0;
border-left: 0px;
vertical-align: middle;
}
.imidiv ul li a:visited{
color: white;
}
.imidiv ul li a:hover
{
height : 25;
background-color: #7686a7;
text-decoration: none;
}
.imidiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .imidiv ul li { float: left; height: 1%; }
* html .imidiv ul li a { height: 1%; }
/* End */
/* --------------------------------------- end -------------------------- */
/*
Date Added : 08-Feb-2008
Author : Ravi Kumar.P
Module : Ajax Related (progress)
These classes are used Ajax progress etc.
*/
#progressBackgroundFilter
{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=30);
opacity:0.5;
z-index:10000;
}
#processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:10001;
background-color:#fff;
border:solid 1px #000;
}
/* end Ajax progress */
.DropShadow
{
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
box-shadow:2px 4px 20px grey;
-moz-box-shadow:2px 4px 20px grey;
-webkit-box-shadow:2px 4px 20px grey;
-khtml-box-shadow:2px 4px 20px grey;
}
/* tabs starts */
.shadetabs
{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10px Verdana;
list-style-type: none;
color: #623C02;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li
{
display: inline;
margin: 0;
}
.shadetabs li a
{
text-decoration: none;
position: relative;
z-index: -0;
padding: 3px 4px;
margin-right: 0px;
border: 1px solid #333333;
color: #623C02;
background-image: url(../../images/shade.gif);
}
.shadetabs li a:visited
{
color: #623C02;
}
.shadetabs li a:hover
{
text-decoration: NONE;
color: #660000;
}
.shadetabs li a.selected
{
/*selected main tab style */
position: relative;
top: 1px;
border-top: 2px solid #D4D4D4;
border-bottom: 0px;
color: #660000;
border-bottom-color: white;
background-image: url(../../images/middle.png);
}
.shadetabs li a.selected:hover
{
/*selected main tab style */
text-decoration: none;
color: #660000;
}
/* tabs end */
/* XP IE7 theme - Backgrounds */
.visoft__tab_xpie7 .ajax__tab_header { background:url(../../images/tab-line.gif) repeat-x bottom; }
.visoft__tab_xpie7 .ajax__tab_outer { background:url(../../images/tab-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_inner { background:url(../../images/tab-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_tab { background:url(../../images/tab.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { background:url(../../images/tab-hover-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { background:url(../../images/tab-hover-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { background:url(../../images/tab-hover.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { background:url(../../images/tab-active-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { background:url(../../images/tab-active-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { background:url(../../images/tab-active.gif) repeat-x; }
/* XP IE7 theme - Other Styles */
.visoft__tab_xpie7 .ajax__tab_header { font-family:verdana,tahoma,helvetica;font-size:11px; }
.visoft__tab_xpie7 .ajax__tab_outer { height:29px; }
.visoft__tab_xpie7 .ajax__tab_inner { padding-left:3px; }
.visoft__tab_xpie7 .ajax__tab_tab { padding:8px 40px;margin:0; }
.visoft__tab_xpie7 .ajax__tab_body { font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; background-image:url(../../Images/bg_main.gif); }
/* tabs end */
/* Auto Complete */
/* flyout */
.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : hand;
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
padding:0px;
}
/* item */
.autocomplete_listItem
{
margin : 0px;
background-color : white;
color : #030303;
padding : 2px;
line-height:2em;
border-bottom:1px solid silver;
}
/* highlighted item */
.autocomplete_highlightedListItem
{
margin : 0px;
background-color : #F7F6F4;
font-weight:bold;
padding: 2px;
line-height:2em;
border-bottom:1px solid silver;
}
/* End Auto Complete */
/* RSS FEED READER*/
.tableft
{
text-align: right;
padding: 5px 10px 5px 5px;
width: 15%;
}
.txtBoxWid
{
width: 250px;
}
.ddlBoxWid
{
width: 130px;
}
.errortext
{
font-weight: bold;
font-style: italic;
font-size: 10px;
color: #ff4900;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
/*TreeView*/
.AspNet-TreeView
{
width: 200px;
color: #000;
}
.AspNet-TreeView a
{
font-size: 10px;
font-family: Verdana;
color: #000;
}
.AspNet-TreeView td
{
padding: 2px 3px;
}
.titlered
{
color: #c62a3b;
font-weight: 700;
}
.gvManage
{
color: #000;
}
.gvManageAnc
{
color: #103e8e;
font-weight: 700;
text-decoration: underline;
}
.editgvmanage
{
color: #103e8e;
font-weight: 700;
text-decoration: underline;
}
.createFeed
{
color: #103e8e;
text-decoration: underline;
font-size: 10px;
float: right;
}
/* Popup*/
.jqlightbox
{
position: absolute;
top: 40%;
left: 40%;
z-index: 9999;
width: 800px;
height: 450px;
margin: -200px 0 0 -250px;
text-align: left;
}
.jqlightboxCenter
{
position: absolute;
top: 32%;
left: 73%;
z-index: 9999;
width: 800px;
height: 450px;
margin: -200px 0 0 -250px;
text-align: left;
}
.jqoverlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
background-color: #444;
-moz-opacity: 0.4;
opacity: .40;
filter: alpha(opacity=40);
}
/* RSS FEED READER*/
/* Quick Links Popup */
#popitmenu{
position: absolute;
background-color: white;
border:1px solid #D4D4D4;
font: normal 10px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}
#popitmenu a{
text-decoration: none;
padding-left: 6px;
background-color: white;
color: #D4D4D4;
display: block;
}
#popitmenu a:hover{ /*hover background color*/
background-color: #E4E6E9;
}
/* End Quick Links Popup*/
/* Modal Popup */
.ModelPopup
{
position: absolute;
top: 30%;
left: 43%;
padding:0px;
z-index: 10001;
background-color:#F7F6F4;
}
.ModelPopupBG
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #cccccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=50) ;
opacity: 0.5;
z-index: 10000;
}
/* End Modal Popup */
========================================
UNDER .CS
---------
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetCountries(string prefixText)
{
DataTable dt = new DataTable();
dt.Columns.Add("CountryName");
DataRow dr = dt.NewRow();
dr["CountryName"] = "India";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "Pakistan";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "America";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "Australia";
dt.Rows.Add(dr);
// dt = dv;
List<string> CountryNames = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
if (dt.Rows[i][0].ToString().ToUpper().Trim().StartsWith(prefixText.ToUpper().Trim()))
CountryNames.Add(dt.Rows[i][0].ToString());
}
return CountryNames;
}
=============================================================================
UNDER .ASPX
=-------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax AutoCompleteExtender without Webservice</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtCountry" CssClass="txtFieldAuto" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
TargetControlID="txtCountry" BehaviorID="AutoCompleteEx" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries">
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it --%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" />
<%--Cache the original size of the completion list the first time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_GetCountries();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" />
<%-- Expand from 0px to the appropriate size while fading in --%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</cc1:AutoCompleteExtender>
</div>
</form>
</body>
</html>
========================================
body
{
scrollbar-arrow-color:#333333;
scrollbar-face-color:#E4E6E9;
scrollbar-highlight-color:#333333;
}
.backColorDark
{
background-color :#D4D4D4;
}
.backColorlight
{
background-color:#7686a7;
}
.foreColorDark
{
color:#D4D4D4;
}
.headerBottomBorder
{
border-bottom : 2px solid #D4D4D4;
}
.Hdrtext
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight: bold;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:5px 0px 5px 0px;
margin-top:5px;
margin-bottom:5px;
border-bottom:5px solid #fff;
/*border:solid 1px #000;*/
}
.Hdrtext_BreadCrumb
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight:normal;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:5px 0px 5px 0px;
margin-top:5px;
margin-bottom:5px;
border-bottom:5px solid #fff;
/*border:solid 1px #000;*/
}
.Hdrtext_New
{
/*background-color :#f2f2f2;*/
background:url(../../images/bg_chart.png) repeat-x;
color: Black ;
font-weight: bold;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
padding:3px 0px 3px 0px;
margin-top:3px;
margin-bottom:3px;
border-bottom:3px solid #fff;
/*border:solid 1px #000;*/
}
.HdrtextR
{
background-color : #D4D4D4;
color: white;
font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: right;
}
.Hdrtexthome
{
background-color : #D4D4D4;
color: white;
font-weight: bold;
font-size: 12px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
}
.HdrtextBlack
{
background-color : #D4D4D4;
color: #333333;
font-weight: bold;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.aStyle
{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: verdana,Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
}
.labelStyle
{
color: #333333;
font-weight: normal;
font-size: 11px;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.labelStyleB
{
color: #333333;
font-weight: normal;
font-size: 10px;
font-weight:bold;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
}
.loginBorder
{
background-color:#333333;
}
.sessiontimedout
{
border-right: #333333 1px solid;
border-top: #333333 1px solid;
font-weight: bold;
font-size: 11px;
border-left: #333333 1px solid;
color: white;
border-bottom: #333333 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #333333;
}
.txtField
{
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: normal;
font-size: 9px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtFieldWatermark
{
background-color:#E4E6E9;
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: normal;
vertical-align: middle;
font-size: 9px;
height:20px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtFieldAuto
{
border-right: #666666 1px solid;
border-top: #666666 1px solid;
font-weight: bold;
vertical-align:middle;
height:20px;
font-size: 10px;
border-left: #666666 1px solid;
color: #000000;
border-bottom: #666666 1px solid;
font-family: Verdana,Arial;
text-decoration: none;
}
.txtBold
{
border: #666666 1px solid;
font-weight: bold;
font-size: 10px;
background-color: #E4E6E9;
border:1px;
font-family: Verdana,Arial;
padding-top:2px;
padding-bottom:2px;
}
.bold_text_more
{
font-weight: bold;
font-size: 11px;
color: #003366;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}
.normalText
{
font-weight: normal;
font-size: 10px;
color: #333333;
text-align: left;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.linkbutn
{
color: #333333;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 10px;
font-weight: bold;
text-decoration : none;
}
.hdrlinkbutn
{
color: #333333;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration : none;
}
.hdrlinkbutnW
{
color: #ffffff;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration : none;
}
.linkRed
{
color:Maroon;
vertical-align: middle;
font-family: Verdana,Arial;
font-style:italic;
font-size: 10px;
font-weight: bold;
text-decoration : none;
cursor:pointer;
}
.linkbutnwhite
{
color: white;
vertical-align: middle;
font-family: Verdana,Arial;
font-size: 10px;
font-weight: bold;
text-decoration : none;
}
.alternateText
{
font-weight: normal;
font-size: 10px;
color: #333333;
text-align: left;
background-color: #F7F6F4;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalText
{
font-weight:bold;
font-style:italic;
font-size: 10px;
color: #333333;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalText1
{
font-weight:bold;
font-style:italic;
font-size: 10px;
color: red;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.criticalTextRed
{
font-weight:bold;
font-size: 10px;
color: red;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.updatePortalBackground
{
background-color:#F7F6F4;
border-top:1px solid silver;
border-bottom:1px solid silver;
height:40px;
}
.noteBackground
{
background-color:#F7F6F4;
border:1px solid silver;
height:28px;
margin-top:8px;
margin-bottom:8px;
}
.noteText
{
font-weight:normal;
font-size: 11px;
color: #333333;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
.gridHead
{
background-color: #ccc;
font-weight: bold;
color: Black ;
font-size: 10px;
font-family: Verdana,Arial;
text-align: center;
vertical-align: middle;
margin-top:5px;
margin-bottom:5px;
padding:5px 0px 5px 0px;
}
.gridPager
{
background-color: #D4D4D4;
font-weight: bold;
color: White;
font-size: 10px;
font-family: Verdana,Arial;
text-align: right;
vertical-align: middle;
}
.butText
{
border-right: #003366 1px solid;
border-top: #003366 1px solid;
font-weight: normal;
font-size: 11px;
background-image: url(../../Images/but_bg.gif);
border-left: #003366 1px solid;
color: #003366;
border-bottom: #003366 1px solid;
font-family: Verdana,Arial, Helvetica, sans-serif;
}
.norText
{
font-weight: normal;
font-size: 10px;
color: #333333;
font-family: verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
.HighLightRow
{
background-color:lightgoldenrodyellow;
}
.configPopup
{
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight:bold;
color:#222222;
/*background-image: url(../../Images/graybutton_bg.gif);*/
background-image: url(../../Images/gridHeaderbg.gif);
border: #D4D4D4 1px solid;
height:20px;
}
.configPopupClick
{
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight:bold;
/*color:#000000;*/
/*background-image: url(../../Images/button_bg.gif);*/
color:#ffffff;
background-image: url(../../Images/bg_subheader.png);
border-bottom: #D4D4D4 0px solid;
height:20px;
}
.configPopupArrow
{
height:10px;
background:url(../../Images/sub_d.gif);
background-repeat:no-repeat;
background-position:top;
}
.configPopupNoArrow
{
height:10px;
}
.calendar
{
TABLE-LAYOUT: fixed;
BACKGROUND-IMAGE: url(../../Images/cal.gif);
WIDTH: 16px;
CURSOR: hand;
BORDER-TOP-STYLE: none;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
HEIGHT: 16px;
BACKGROUND-COLOR: transparent;
BORDER-BOTTOM-STYLE: none;
}
#progressBackgroundFilter
{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=30);
opacity:0.5;
z-index:10000;
}
#processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:10001;
background-color:#fff;
border:solid 1px #000;
}
/*
Date Added : 21-Apr-2007
Author : Subbarao.TTV
Module : MenuTempate.cs
These classes are used generate dynamic menus.
*/
.imidiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
border-bottom: 1px solid #ccc;
font-weight:bold;
font-size: 10px;
font-family: Arial;
vertical-align: middle;
z-index: 0;
}
.imidiv ul li{
background: #D4D4D4;
position: relative;
border-left-style:none;
border-right-style : none;
vertical-align :middle;
border-bottom : 1px;
}
/*Sub level menu items */
.imidiv ul li ul
{
margin: 0;
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
border-left: 1px solid #ccc;
visibility: hidden;
z-index: 0;
vertical-align :middle;
}
/* Sub level menu links style */
.imidiv ul li a{
display: block;
cursor:hand;
/*
font-weight: bold;
font-size: 10px;
*/
font-weight: normal;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
/*background: #D4D4D4, #fff;*/
background: #D4D4D4;
padding: 0px 5px;
border: 1px solid #ccc;
border-bottom: 1px;
border-right:0;
border-left: 0px;
vertical-align: middle;
}
.imidiv ul li a:visited{
color: white;
}
.imidiv ul li a:hover
{
height : 25;
background-color: #7686a7;
text-decoration: none;
}
.imidiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .imidiv ul li { float: left; height: 1%; }
* html .imidiv ul li a { height: 1%; }
/* End */
/* --------------------------------------- end -------------------------- */
/*
Date Added : 08-Feb-2008
Author : Ravi Kumar.P
Module : Ajax Related (progress)
These classes are used Ajax progress etc.
*/
#progressBackgroundFilter
{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=30);
opacity:0.5;
z-index:10000;
}
#processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:10001;
background-color:#fff;
border:solid 1px #000;
}
/* end Ajax progress */
.DropShadow
{
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
box-shadow:2px 4px 20px grey;
-moz-box-shadow:2px 4px 20px grey;
-webkit-box-shadow:2px 4px 20px grey;
-khtml-box-shadow:2px 4px 20px grey;
}
/* tabs starts */
.shadetabs
{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10px Verdana;
list-style-type: none;
color: #623C02;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li
{
display: inline;
margin: 0;
}
.shadetabs li a
{
text-decoration: none;
position: relative;
z-index: -0;
padding: 3px 4px;
margin-right: 0px;
border: 1px solid #333333;
color: #623C02;
background-image: url(../../images/shade.gif);
}
.shadetabs li a:visited
{
color: #623C02;
}
.shadetabs li a:hover
{
text-decoration: NONE;
color: #660000;
}
.shadetabs li a.selected
{
/*selected main tab style */
position: relative;
top: 1px;
border-top: 2px solid #D4D4D4;
border-bottom: 0px;
color: #660000;
border-bottom-color: white;
background-image: url(../../images/middle.png);
}
.shadetabs li a.selected:hover
{
/*selected main tab style */
text-decoration: none;
color: #660000;
}
/* tabs end */
/* XP IE7 theme - Backgrounds */
.visoft__tab_xpie7 .ajax__tab_header { background:url(../../images/tab-line.gif) repeat-x bottom; }
.visoft__tab_xpie7 .ajax__tab_outer { background:url(../../images/tab-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_inner { background:url(../../images/tab-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_tab { background:url(../../images/tab.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { background:url(../../images/tab-hover-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { background:url(../../images/tab-hover-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { background:url(../../images/tab-hover.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { background:url(../../images/tab-active-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { background:url(../../images/tab-active-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { background:url(../../images/tab-active.gif) repeat-x; }
/* XP IE7 theme - Other Styles */
.visoft__tab_xpie7 .ajax__tab_header { font-family:verdana,tahoma,helvetica;font-size:11px; }
.visoft__tab_xpie7 .ajax__tab_outer { height:29px; }
.visoft__tab_xpie7 .ajax__tab_inner { padding-left:3px; }
.visoft__tab_xpie7 .ajax__tab_tab { padding:8px 40px;margin:0; }
.visoft__tab_xpie7 .ajax__tab_body { font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; background-image:url(../../Images/bg_main.gif); }
/* tabs end */
/* Auto Complete */
/* flyout */
.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : hand;
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
padding:0px;
}
/* item */
.autocomplete_listItem
{
margin : 0px;
background-color : white;
color : #030303;
padding : 2px;
line-height:2em;
border-bottom:1px solid silver;
}
/* highlighted item */
.autocomplete_highlightedListItem
{
margin : 0px;
background-color : #F7F6F4;
font-weight:bold;
padding: 2px;
line-height:2em;
border-bottom:1px solid silver;
}
/* End Auto Complete */
/* RSS FEED READER*/
.tableft
{
text-align: right;
padding: 5px 10px 5px 5px;
width: 15%;
}
.txtBoxWid
{
width: 250px;
}
.ddlBoxWid
{
width: 130px;
}
.errortext
{
font-weight: bold;
font-style: italic;
font-size: 10px;
color: #ff4900;
font-family: Verdana,Arial, Helvetica, sans-serif;
text-decoration: none;
}
/*TreeView*/
.AspNet-TreeView
{
width: 200px;
color: #000;
}
.AspNet-TreeView a
{
font-size: 10px;
font-family: Verdana;
color: #000;
}
.AspNet-TreeView td
{
padding: 2px 3px;
}
.titlered
{
color: #c62a3b;
font-weight: 700;
}
.gvManage
{
color: #000;
}
.gvManageAnc
{
color: #103e8e;
font-weight: 700;
text-decoration: underline;
}
.editgvmanage
{
color: #103e8e;
font-weight: 700;
text-decoration: underline;
}
.createFeed
{
color: #103e8e;
text-decoration: underline;
font-size: 10px;
float: right;
}
/* Popup*/
.jqlightbox
{
position: absolute;
top: 40%;
left: 40%;
z-index: 9999;
width: 800px;
height: 450px;
margin: -200px 0 0 -250px;
text-align: left;
}
.jqlightboxCenter
{
position: absolute;
top: 32%;
left: 73%;
z-index: 9999;
width: 800px;
height: 450px;
margin: -200px 0 0 -250px;
text-align: left;
}
.jqoverlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
background-color: #444;
-moz-opacity: 0.4;
opacity: .40;
filter: alpha(opacity=40);
}
/* RSS FEED READER*/
/* Quick Links Popup */
#popitmenu{
position: absolute;
background-color: white;
border:1px solid #D4D4D4;
font: normal 10px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}
#popitmenu a{
text-decoration: none;
padding-left: 6px;
background-color: white;
color: #D4D4D4;
display: block;
}
#popitmenu a:hover{ /*hover background color*/
background-color: #E4E6E9;
}
/* End Quick Links Popup*/
/* Modal Popup */
.ModelPopup
{
position: absolute;
top: 30%;
left: 43%;
padding:0px;
z-index: 10001;
background-color:#F7F6F4;
}
.ModelPopupBG
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #cccccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=50) ;
opacity: 0.5;
z-index: 10000;
}
/* End Modal Popup */
========================================
UNDER .CS
---------
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetCountries(string prefixText)
{
DataTable dt = new DataTable();
dt.Columns.Add("CountryName");
DataRow dr = dt.NewRow();
dr["CountryName"] = "India";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "Pakistan";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "America";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["CountryName"] = "Australia";
dt.Rows.Add(dr);
// dt = dv;
List<string> CountryNames = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
if (dt.Rows[i][0].ToString().ToUpper().Trim().StartsWith(prefixText.ToUpper().Trim()))
CountryNames.Add(dt.Rows[i][0].ToString());
}
return CountryNames;
}
=============================================================================
UNDER .ASPX
=-------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax AutoCompleteExtender without Webservice</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtCountry" CssClass="txtFieldAuto" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
TargetControlID="txtCountry" BehaviorID="AutoCompleteEx" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries">
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it --%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" />
<%--Cache the original size of the completion list the first time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_GetCountries();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" />
<%-- Expand from 0px to the appropriate size while fading in --%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</cc1:AutoCompleteExtender>
</div>
</form>
</body>
</html>
No comments:
Post a Comment