How to use AutocompleteExtender for a textbox in a datagrid

See more:

C#

Hi,
I want to implement AutocompleteExtender into the textbox which is inside the datagrid.i have written webservice for that.

<<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="smartsearch" %>
asp:DataGrid ID="dgProductList" Style="overflow: auto" runat="server" AllowPaging="True"
                                                                BorderWidth="0" CssClass="gridbody" CellSpacing="1" AutoGenerateColumns="False"
                                                                PageSize="5" CellPadding="0">
                                                                <ItemStyle CssClass="GridText"></ItemStyle>
                                                                <HeaderStyle CssClass="Gridheader"></HeaderStyle>
                                                                <Columns>
                                                                    <asp:BoundColumn DataField="mio_id" Visible="False"></asp:BoundColumn>
                                                                   <%-- <asp:BoundColumn DataField="Entity_ID" Visible="False"></asp:BoundColumn>--%>
                                                                   <asp:BoundColumn DataField="mio_category" Visible="False"></asp:BoundColumn>
                                                                    <asp:TemplateColumn HeaderStyle-VerticalAlign="Middle">
                                                                        <HeaderTemplate>
                                                                            <input type="checkbox" id="chkProductsListDeleteAll"  runat="server" name="chkTraceabilityDeleteAll">
                                                                        </HeaderTemplate>
                                                                        <ItemTemplate>
                                                                            <input type="checkbox" id="chkProductsListDelete"  runat="server" name="chkTraceabilityDelete">
                                                                        </ItemTemplate>
                                                                    </asp:TemplateColumn>
                                                                    <asp:ButtonColumn HeaderText="" ButtonType="LinkButton" Text="<img src='../../images/Edit.gif'  border=0/>"
                                                                        CommandName="Update" />
                                                                    
                                                                   
                                                                    <asp:TemplateColumn>
                                                                    <HeaderStyle HorizontalAlign="Center" />
                                                                        <HeaderTemplate>
                                                                            Category</HeaderTemplate>
                                                                        <ItemTemplate>
                                                                            <asp:DropDownList Width="350px" CssClass="dropdown" ID="drpCategory" runat="server">
                                                                            </asp:DropDownList>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateColumn>
                                                                   
                                                                    <asp:TemplateColumn>
                                                                     <HeaderStyle HorizontalAlign="Center" />
                                                                        <HeaderTemplate>
                                                                            Products</HeaderTemplate>
                                                                        <ItemTemplate>
                                                                         <asp:TextBox ID="TxtProducts" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"mio_product")%>' AutoPostBack="true"  ></asp:TextBox>
                                                                         
                                                                         <smartsearch:AutoCompleteExtender  BehaviorID="AutoCompleteEx1" ID="productTextBox"  runat="server"
                                                            UseContextKey="true" Enabled="true" TargetControlID="TxtProducts" MinimumPrefixLength="1"
                                                            EnableCaching="true" ServiceMethod="GetProducts"  ServicePath="GetDataForSmartSearch.asmx" CompletionInterval="1000"
                                                            CompletionSetCount="20"   CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"                                                          
                                                            CompletionListHighlightedItemCssClass="AutoCompleteExtender_HighlightedItem" 
                                                            CompletionListCssClass="AutoCompleteExtender_CompletionList" DelimiterCharacters=";, :">
                                                            
                                                            <Animations>
                                                         <OnShow>
                                                   <Sequence>
                                               <OpacityAction Opacity="0" />
                                          <HideAction Visible="true" />   
                                    <ScriptAction Script="
                                         // Cache the size and setup the initial size
                                        var behavior = $find('AutoCompleteEx1');
                                        if (!behavior._height) {
                                           var target = behavior.get_completionList();
                                         behavior._height = target.offsetHeight - 2;
                                           target.style.height = '0px';
                                           }" />
                                
                                        <Parallel Duration=".4">
                                       <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx1')._height" />
                            </Parallel>       
            </Sequence>      
          </OnShow>
      <OnHide>
         <%-- Collapse down to 0px and fade out --%>
                       <Parallel Duration=".4">
                            <FadeOut />
                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx1')._height" EndValue="0" />
                        </Parallel>
      </OnHide>
                                                            </Animations>
                                                        </smartsearch:AutoCompleteExtender>

                                                                            <%--<input type="text" style="width: 350px;"  önclick="GetPromt(this);" id="TxtProducts"
                                                                                class="textbox" name="TxtProducts"  runat="server" value='<%#DataBinder.Eval(Container.DataItem,"mio_product")%>'>--%>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateColumn></Columns>
                                                                <PagerStyle Visible="False"></PagerStyle>
                                                            </asp:DataGrid>
                                                        </div>

While clciking on Add New row button, its giving this error--
Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'AutoCompleteEx1' can't be added to the application.

I want to use Ajax AutoCompleteExtender into the textbox which is in DataGrid

Webservice Code----------------

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class GetDataForSmartSearch : System.Web.Services.WebService
{

public GetDataForSmartSearch()
{

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
[System.Web.Script.Services.ScriptMethod()]
// [System.Web.Services.WebMethod]

public string[] GetProducts(string PrefixTextForProducts, int count)
{
CController objGetProducts = new CController();
DataSet ds1 = new DataSet();
int i;
ds1 = objGetProducts.GetProductsData(PrefixTextForProducts);
List str = new List(ds1.Tables[0].Rows.Count);
//DataRow[] dr = ds
if (ds1.Tables[0].Rows.Count > 0)
{
for (i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
str.Add(ds1.Tables[0].Rows[i]["mio_product"].ToString());
}
}
return str.ToArray();

}