AutoCompleteExtender control in a repeater

Question

I have an AutoCompleteExtender AjaxControlToolkit control inside a repeater and need to get a name and a value from the web service. The auto complete field needs to store the name and there is a hidden field that needs to store the value. When trying to do this outside of a repeater I normally have the event OnClientItemSelected call a javascript function similiar to

function GetItemId(source, eventArgs)
{
   document.getElementById('<%= ddItemId.ClientID %>').value = eventArgs.get_value();
}

However since the value needs to be stored in a control in a repeater I need some other way for the javascript function to "get at" the component to store the value.

Answer 1

I've got some JavaScript that might help you. My ASP.Net AutoComplete extender is not in a repeater, but I've modified that code to detect the ID of the TextBox you are going to write the erturned ID to, it should work (but I haven't tested it all the way through to post back). Use the value from 'source' parameter in the client side ItemSelected method. That is the ID of the calling AutoComplete extender. Just make sure that you assign an ID the hidden TextBox in the Repeater Item that is similar to the ID of the extender. Something like this:

<asp:Repeater ID="RepeaterCompareItems" runat="server">
    <ItemTemplate>
        <ajaxToolkit:AutoCompleteExtender runat="server" 
           ID="ACE_Item"
           TargetControlID="ACE_Item_Input"
           ...other properties...
           OnClientItemSelected="ACEUpdate_RepeaterItems" />
        <asp:TextBox ID="ACE_Item_Input" runat="server" />
        <asp:TextBox ID="ACE_Item_IDValue" runat="server" style="display: none;" />
    </ItemTemplate>
</asp:Repeater>

Then the JS method would look like this:

 function ACEUpdate_CustomerEmail(source, eventArgs) {
            UpdateTextBox = document.getElementById(source.get_id() + '_IDValue');
            //alert('debug = ' + UserIDTextBox);
            UpdateTextBox.value = eventArgs.get_value();
            //alert('customer id = ' + UpdateTextBox.value);
        }

There are extra alert method calls that you can uncomment for testing and remove for production. In a simple and incomplete test page, I got IDs that looked like this: RepeaterCompareItems_ctl06_ACE_Item_IDValue (for the text box to store the value) and RepeaterCompareItems_ctl07_ACE_Item (for the AC Extender) - yours may be a little different, but it looks practical. Good Luck.

Answer 2

Since you are using a Repeater I suggest wiring the OnItemDataBound function...

<asp:Repeater id="rptResults" OnItemDataBound="FormatResults" runat="server">

<ItemTemplate>

<asp:PlaceHolder id="phResults" runat="server" />

</ItemTemplate>

</asp:Repeater>

Then in the code behind use something like

`Private Sub FormatResults(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)

Dim dr As DataRow = CType(CType(e.Item.DataItem, DataRowView).Row, DataRow) 'gives you access to all the data being bound to the row ex. dr("ID").ToString

Dim ph As PlaceHolder = CType(e.Item.FindControl("phResults"), PlaceHolder)

' programmatically create AutoCompleteExtender && set properties

' programmatically create button that fires desired JavaScript

' use "ph.Controls.Add(ctrl) to add controls to PlaceHolder

End Sub`

Voila

Answer 3

If I understand the problem correctly, you should be able to do what you normally do, but instead of embeding the ClientId, use the 'source' argument. That should allow you to get access to the control you want to update.