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

If you like this post than join us or share

16 comments:

My Friends said...

bvnvbnn


Surya Prakash said...

great stufff... and easy solution


Misliplavo said...

But if autocomplete list is empty,
method HideImage() will never be called?

How to solve this?


Misliplavo said...

This comment has been removed by the author.


amiT jaiN said...

@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


Misliplavo said...

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.


amiT jaiN said...

@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 ?


Misliplavo said...

Yes, interesting solution... :)
Sounds quite fine...
I`ll take it... :)
Thx...


Anish nama said...

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...


JASPREET SINGH SAINI said...

i didnot get web service code.
Plz help me.


amiT jaiN said...

@JASPREET SINGH SAINI:

You can see the webservice code in link below

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


Kalpesh said...

i want Image loadr in gridview's Textbox in Your Example Cacading Dropdown -> i have problem of Key Pressing Event


Anonymous said...

i tried the above code, but its not working, i guess webservice method is not called. Pls help me on this.


Anonymous said...

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?


Anonymous said...

OnClientHiding="HideImage" in ajax:AutoCompleteExtender will solve the problem with displaying the image after nothing was found...
regards Peter


Anonymous said...

Sukanta Samanata: yes offcourse it will working


Find More Articles