Csharp Asp.Net Articles C# VB Tutorials Code Examples Samples: AutocompleteExtender Textbox Loading Progress Image

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()");
}

Here i've added onblur and onkeypress attributes to textbox and calling respective function of javascript to show hide image.
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

16 comments:

My FriendsJune 25, 2009 at 11:45 AM
bvnvbnn
Surya PrakashJune 30, 2009 at 1:00 PM
great stufff... and easy solution
MisliplavoJuly 3, 2009 at 4:01 PM
But if autocomplete list is empty,
method HideImage() will never be called?

How to solve this?
UnknownJuly 3, 2009 at 6:59 PM
This comment has been removed by the author.
UnknownJuly 4, 2009 at 1:57 AM
@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
UnknownJuly 6, 2009 at 1:59 PM
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.
UnknownJuly 7, 2009 at 12:59 AM
@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 ?
UnknownJuly 7, 2009 at 12:20 PM
Yes, interesting solution... :)
Sounds quite fine...
I`ll take it... :)
Thx...
Anish namaAugust 11, 2009 at 7:13 PM
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...
AnonymousAugust 18, 2009 at 12:45 PM
i didnot get web service code.
Plz help me.
UnknownAugust 19, 2009 at 1:29 AM
@JASPREET SINGH SAINI:

You can see the webservice code in link below

http://csharpdotnetfreak.blogspot.com/2009/01/ajax-autocomplete-textbox-gridview.html

kalpesh jogiJanuary 26, 2010 at 3:07 PM
i want Image loadr in gridview's Textbox in Your Example Cacading Dropdown -> i have problem of Key Pressing Event
AnonymousJuly 30, 2010 at 10:09 AM
i tried the above code, but its not working, i guess webservice method is not called. Pls help me on this.
AnonymousMay 19, 2011 at 12:44 PM
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?
AnonymousJanuary 6, 2012 at 6:53 PM
OnClientHiding="HideImage" in ajax:AutoCompleteExtender will solve the problem with displaying the image after nothing was found...
regards Peter
AnonymousAugust 1, 2012 at 5:26 PM
Sukanta Samanata: yes offcourse it will working

AutocompleteExtender Textbox Loading Progress Image

Other asp.net,C#,VB.NET articles:

16 comments: