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
 |
||
 |
 |
|
 |
 |
add to del.icio.us saved by 0 users |
11 comments:
bvnvbnn
great stufff... and easy solution
But if autocomplete list is empty,
method HideImage() will never be called?
How to solve this?
This post 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
Post a Comment