Add or show Animated Loading or progress GIF Image in Ajax AutoCompleteExtender textbox using asp.net 2.0 and 3.5.
In this example i m going to describe how to add animated Progress Image inside Ajax Auto complete extender textbox to represent loading of data.
For achieving this functionality i am using two different approaches for different versions of AjaxControlToolkit.dll
If you are looking for how to implement AutoComplete textbox than read
Ajax autocomplete extender textbox in EditItemTemaplate of GridView
If you are looking for ajax cascading dropdownlist then read
Ajax Cascading DropDownList in GridView with databse in ASP.NET
1st Approach
This approach is very simple and can be handy if you are using older/earlier version of AjaxControlToolkit (eg versions like 1.0.10201.0) which does not support css properties or properties like onclientpopulating.
For this write the below mentioned javascript in head section of html markup of the aspx page
<script type="text/javascript">
function ShowImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'url(images/loader.gif)';
document.getElementById('txtAutoComplete')
.style.backgroundRepeat= 'no-repeat';
document.getElementById('txtAutoComplete')
.style.backgroundPosition = 'right';
}
function HideImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'none';
}
</script>
In this script I've written two function to show and hide image, in the functions i m setting the background image style using document.getElementByID method
Now write this code in Page_Load event of aspx page
protected void Page_Load(object sender, EventArgs e)
{
this.txtAutoComplete.Attributes.Add
("onkeypress", "ShowImage()");
this.txtAutoComplete.Attributes.Add
("onblur", "HideImage()");
}
Build the solution and run ti see the results
2nd approach
This approach works if you are using newer versions of AjaxControlToolkit.dll (Version 1.0.20229.20821 or later)
For this write the above mentioned javascript in head section of html markup of page.
Now in source of autocomplete extender add onclientpopulating="ShowImage" and onclientpopulated="HideImage"
<ajaxToolkit:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="txtAutoComplete"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass=
"autocomplete_completionListElement"
CompletionListItemCssClass=
"autocomplete_listItem"
CompletionListHighlightedItemCssClass=
"autocomplete_highlightedListItem"
onclientpopulating="ShowImage"
onclientpopulated="HideImage">
</ajaxToolkit:AutoCompleteExtender>
Complete html source of the page look like
<head runat="server">
<title>Progress Image in AutoComplete TextBox</title>
<script type="text/javascript">
function ShowImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'url(images/loader.gif)';
document.getElementById('txtAutoComplete')
.style.backgroundRepeat= 'no-repeat';
document.getElementById('txtAutoComplete')
.style.backgroundPosition = 'right';
}
function HideImage()
{
document.getElementById('txtAutoComplete')
.style.backgroundImage = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>
</asp:ScriptManager>
<br />
<div>
<asp:TextBox ID="txtAutoComplete" runat="server" Width="252px">
</asp:TextBox><br />
<ajaxToolkit:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="txtAutoComplete"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass=
"autocomplete_completionListElement"
CompletionListItemCssClass=
"autocomplete_listItem"
CompletionListHighlightedItemCssClass=
"autocomplete_highlightedListItem"
onclientpopulating="ShowImage"
onclientpopulated="HideImage">
</ajaxToolkit:AutoCompleteExtender>
</div>
</form>
Hope this helps
Tags
ASP.NET
C#
GridView
VB.NET
AJAX
Sql Server
JavaScript
FindControl
EditItemTemplate
WinForms
Windows Froms
Session
Visual studio
Web.config
Authentication
ItemTemplate
DropDownList
Forms Authentication
Performance Optimization
Blogger Tricks
Crystal Reports
QueryString
SqlCommand
XML
AutoComplete Extender
BloggerTips
DetailsView
Excel
FileUpload
MembershipProvider
ObjectDataSource
DataList
IIS
LoginControl
ModalPopUpExtender
TraceMobileNumber
Update Panel
Web Service
iTextSharp
AppFabric
Cross Page Posting
DataKeyNames
jQuery
Cookies
FooterTemplate
MasterPage
Progress Template
Server.Transfer
Submit Form
Blog Archive
-
►
2012
(28)
-
►
February
(14)
- ToolkitScriptManager On MasterPage To Use AjaxCont...
- PrintPreviewDialog In Windows Forms DataGridView C...
- Print Printing DataGridView In WinForms C# VB.NET
- Hide Disable Commandfield Or ButtonField In GridVi...
- ExecuteNonQuery ExecuteScalar ExecuteReader Exampl...
- Read Write XML File Using C# VB.NET In Asp.Net
- Check UserName Email Availability In Asp.Net Using...
- SqlCommand ExecuteXmlReader C# VB.NET Asp.Net
- ExecuteScalar Example In Asp.Net C# VB.NET
- ExecuteReader Example Asp.Net C# VB.NET
- SqlCommand ExecuteNonQuery Example C# VB.NET Asp.N...
- Visual Studio Keyboard Shortcuts
- Asp.Net Ajax FilteredTextBox Extender Example
- Asp.Net Maintain ScrollPosition OnPostBack In Chro...
-
►
January
(14)
- Browser Detection In Asp.Net
- Export Crystal Reports To PDF Word Excel In Asp.Ne...
- Asp.Net AdRotator With Timer Example To Rotate Ads...
- Download File From Server In Asp.Net
- AspNet CompareValidator With Date Example
- Create User Registration Form In AspNet
- Visual Studio Remove Unused References With Organi...
- Get RowIndex In GridView RowCommand Event Using Da...
- Save Store Files In SqlServer Database AspNet
- Nested GridView In Asp.Net GridView Inside GridVie...
- Add License Agreement In Visual Studio Setup Proje...
- Ajax Asp.Net PasswordStrength Example
- Invalid Formatetc Structure Ajax Asp.Net Error
- Create User Programmatically Using Membership In A...
-
►
February
(14)
-
►
2011
(46)
-
►
December
(13)
- CreateUserWizard Email Verification Or Confirmatio...
- Login Page Example Using Login Control In Asp.Net
- Set Session TimeOut In Asp.Net Using WebConfig IIS...
- Remove Delete Duplicate Rows/Records From DataTabl...
- DropDownList In DetailsView EditItemTemplate
- A Potentially Dangerous Request.Form Value Was Det...
- Write Modify Web.Config Programmatically At Run Ti...
- GridView XML Edit Delete Insert Update
- Upload And Read Excel File In Asp.Net
- VisualStudio SetupProject Updates Version Already ...
- Read CSV File And Save To SQL Server In ASP.NET C#...
- GridView XMLDataSource Example
- Add Controls Dynamically WinForms WindowsFroms C# ...
-
►
December
(13)
-
Recent Posts
Topics
- AJAX
- AppFabric
- ASP.NET
- Authentication
- AutoComplete Extender
- Blogger Tricks
- BloggerTips
- C#
- Cookies
- Cross Page Posting
- Crystal Reports
- DataKeyNames
- DataList
- DetailsView
- DropDownList
- EditItemTemplate
- Excel
- FileUpload
- FindControl
- FooterTemplate
- Forms Authentication
- GridView
- IIS
- ItemTemplate
- iTextSharp
- JavaScript
- jQuery
- LoginControl
- MasterPage
- MembershipProvider
- ModalPopUpExtender
- ObjectDataSource
- Performance Optimization
- Progress Template
- QueryString
- Server.Transfer
- Session
- Sql Server
- SqlCommand
- Submit Form
- TraceMobileNumber
- Update Panel
- VB.NET
- Visual studio
- Web Service
- Web.config
- Windows Froms
- WinForms
- XML
Popular Posts
- Trace Mobile Number Location Operator in India
- Trace Mobile Number In India
- Ajax ModalPopUpExtender Example
- Crystal reports in ASP.NET
- FileUpload Save Images In SqlServer Database in ASP.NET
- Display Images In GridView From DataBase Asp.Net
- Shopping Cart Example Code In ASP.NET GridView DataList
- GridView Examples In ASP.NET 2.0 3.5 4.0
- Insert Update Edit Delete record in GridView
- Disable Browser Back Button Using Javascript ASP.NET
Find More Articles
16 comments:
bvnvbnn
great stufff... and easy solution
But if autocomplete list is empty,
method HideImage() will never be called?
How to solve this?
This comment has been removed by the author.
@Misliplavo:
Add this line of code in Page_Load event
this.txtAutoComplete.Attributes.Add("onblur", "HideImage()");
Now whenever textbox loss focus , HideImage() method will be called and image will stop displaying
Yes, I understand that, but still user can not know that his query does not have result.
He will probably wait until image is gone.
@Misliplavo:
In that case you can change the webservice code to display a message if there are no suggestions.
Change the above mentioned code to this and try
public string[] GetCompletionList(string prefixText, int count)
{
if (count == 0)
{
count = 10;
}
DataTable dt = GetRecords(prefixText);
List<string> items = new List<string>(count);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
string strName = dt.Rows[i][0].ToString();
items.Add(strName);
}
System.Threading.Thread.Sleep(2000);
return items.ToArray();
}
else
{
items.Add("No records found");
return items.ToArray();
}
}
Do let me know what do you think about this work around ?
Yes, interesting solution... :)
Sounds quite fine...
I`ll take it... :)
Thx...
hiiiiiiii amit...
i've a problem...
i want to check the checkbox in grid view and want send the mail to those checked user...
plz send me code for this on my emil id anish.nama@gmail.com...
i didnot get web service code.
Plz help me.
@JASPREET SINGH SAINI:
You can see the webservice code in link below
http://csharpdotnetfreak.blogspot.com/2009/01/ajax-autocomplete-textbox-gridview.html
asdfsdf lsd;flskdf;sdfdfd
i want Image loadr in gridview's Textbox in Your Example Cacading Dropdown -> i have problem of Key Pressing Event
i tried the above code, but its not working, i guess webservice method is not called. Pls help me on this.
Hi,I have 2 textboxes
one is FormNoTextBox and another is FormNameTextBox.
Here formNoTextbox is Ajax Textbox.
i get formNo from DB and Binded to formNoTextbox .now when i select formno corresponding formname will show in formnameTextBox.so how can i do this scenario?
OnClientHiding="HideImage" in ajax:AutoCompleteExtender will solve the problem with displaying the image after nothing was found...
regards Peter
Post a Comment