SNag SNag - 5 months ago 47
Ajax Question

Set ContextKey for AutoCompleteExtender inside GridView

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

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.