Set ContextKey for AutoCompleteExtender inside GridView

Question

I have an AJAX AutoCompleteExtender, in a GridView, as seen below:

<asp:GridView
    ID="GV1"
    runat="server"
    AllowPaging="True"
    OnPageIndexChanging="GV1_OnPageIndexChanging"
    OnRowCommand="GV1_RowCommand">
    ...

    <asp:TextBox 
        ID="txt1" 
        runat="server" 
        onkeyup = "SetContextKey()">
    </asp:TextBox>

    <cc1:AutoCompleteExtender
        ID="AutoCompleteExtender1"
        runat="server"
        TargetControlID="txt1"
        ServiceMethod="GetACEList"
        ServicePath="AutoComplete.asmx"
        UseContextKey = "true"
        MinimumPrefixLength="1"
        EnableCaching="true"
        CompletionSetCount="1"
        CompletionInterval="100"
        CompletionListCssClass="autocomplete_completionListElement"
        CompletionListItemCssClass="autocomplete_listItem"
        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
    </cc1:AutoCompleteExtender>

    ...
</asp:GridView>

When trying to set the context key, I am unable to access the AutoCompleteExtender on the client side as well as the server side.

On the client-side, I tried:

function SetContextKey() {
    $find('AutoCompleteExtender1').set_contextKey($get("<%=ddlCountry.ClientID%>").value);
}

but JavaScript is unable to find the 'AutoCompleteExtender1' object. I realize that this is because there are a lot of 'AutoCompleteExtender1' objects in the generated HTML, each with a unique ID.

I then found this article, and I tried setting the context key on the server side:

protected void ddlCountry_OnSelectedIndexChanged(object sender, EventArgs e) {
    AutoCompleteExtender1.ContextKey = ddlCountry.SelectedValue;
}

but the code compilation fails with the error: The name 'AutoCompleteExtender1' does not exist in the current context

QUESTION:
How do I access the AutoCompleteExtender1 object on selected-index change of the drop down so I can set the context key?

Answer 1

Got it! I fixed how I was accessing the object incorrectly on the server side, and it worked!

Here's the server side code -- on selected-index change of the drop down, I loop through each of the rows of the GridView, and set each AutoCompleteExtender object's ContextKey to the drop-down's selected value:

protected void ddlCountry_OnSelectedIndexChanged(object sender, EventArgs e) {

    foreach (GridViewRow gvRow in gvGV1.Rows) {

        AjaxControlToolkit.AutoCompleteExtender AutoCompleteExtender1 
         = (AjaxControlToolkit.AutoCompleteExtender)gvRow.FindControl("AutoCompleteExtender1");

        AutoCompleteExtender1.ContextKey = ddlCountry.SelectedValue;
    }
}

Hope this helps someone stumbling upon this problem!

P.S:
I gave up trying to achieve the same thing on the client-side. I believe being able to set the Context Key on the server side (in C#) has a lot of advantages in terms of flexibility (like being able to change the context key as and when required, and not just on change of a drop-down). Still, if anyone knows how it can be done on the client-side (in JavaScript), please share.

Answer 2

var grid = document.getElementById("<%= grdAddItems.ClientID%>");
for (var i = 0; i < grid.rows.length - 1; i++) {
var txtAmountReceive = $("input[id*=txt1]")
var GridRowID = (txtAmountReceive[i].valueOf('id').id).replace("txt1", "");
var AutoCompleteExt = GridRowID + 'AutoCompleteExtender1';

$find(AutoCompleteExt).set_contextKey("1");

}