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
AutocompleteExtender Textbox Loading Progress Image
Posted by
Unknown
If you like this post than join us or share
Labels: AJAX, AutoComplete Extender, JavaScript
Subscribe to:
Post Comments (Atom)
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
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
Sukanta Samanata: yes offcourse it will working
Post a Comment