Set ContextKey for AutoCompleteExtender inside GridView - asp.net

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

Below code can be used if you want it to set at HTML end instead of c# code
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");
}