asp.netajaxautocompleteextender

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?


Solution

  • 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.