Hi,

I am using AutoComplete AjaxControlToolKit extender 1.0.20229.15278 on .NET 2.0 framework.

I have a address user control which is used multiple places in single ASPX page.

The  Problem I see is the first control shows the Autocomplte popup but another control does not show Autocomplete popup. 

I have couple of guess

- The BehaviorID is identical on control causing the trouble 

- extender control not registered properly for second instance

 Here is "the" code I am using for autocomplte extender 

<ajaxToolkit:AutoCompleteExtender runat="server"

BehaviorID="AutoCompleteEx"

ID="AddressAutocomplete"

TargetControlID="Address"

ServicePath="UIHelper.asmx"

ServiceMethod="GetList"

MinimumPrefixLength="2"

CompletionInterval="200"

EnableCaching="true"

CompletionSetCount="20"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

OnClientItemSelected="OnSelection"

DelimiterCharacters=";, :">

<Animations>

<OnShow>

<Sequence>

<%-- Make the completion list transparent and then show it --%>

<OpacityAction Opacity="0" />

<HideAction Visible="true" />

 

<%--Cache the original size of the completion list the first time

the animation is played and then set it to zero --%>

<ScriptAction Script="

// Cache the size and setup the initial size

var behavior = $find('AutoCompleteEx');

if (!behavior._height) {

var target = behavior.get_completionList();

behavior._height = target.offsetHeight - 2;

target.style.height = '0px';

}" />

 

<%-- Expand from 0px to the appropriate size while fading in --%>

<Parallel Duration=".4">

<FadeIn />

<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />

</Parallel>

</Sequence>

</OnShow>

<OnHide>

<%-- Collapse down to 0px and fade out --%>

<Parallel Duration=".4">

<FadeOut />

<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />

</Parallel>

</OnHide>

</Animations>

</ajaxToolkit:AutoCompleteExtender>

 

 

Any help Appreciated.

 

 

- MAC

 

 

Hi mandar109  ,

Every extender should has its own unique BehaviorID, please remove this property. In the meanwhile, the Animation tag is not nesessary, remove it to prevent the conflict or error of the javascript. So, the UserControl contained this code is enough.

<ajaxtoolkit:autocompleteextender runat="server" id="AddressAutocomplete"
    targetcontrolid="Address" servicepath="UIHelper.asmx" servicemethod="GetList"
    minimumprefixlength="2" completioninterval="200" enablecaching="true" completionsetcount="20"
    completionlistcssclass="autocomplete_completionListElement" completionlistitemcssclass="autocomplete_listItem"
    completionlisthighlighteditemcssclass="autocomplete_highlightedListItem" onclientitemselected="OnSelection"
    delimitercharacters=";, :">
</ajaxtoolkit:autocompleteextender>

Best regards,

Zhi-Qiang Ni

Hi Zhi-Qiang Ni,

Thanks for the response. That should do the trick!

I did it other way around.. I am setting the behaviorID in code behind making it unique something like.

protected string Address1BehaviorID{  get { return "Address1" + this.UniqueID;} }

Now to make Animation work on Autocomplete.

I tried to set behaviorID  by using inline code inside animation tag,

<Length PropertyKey="height" StartValue="0" EndValueScript="$find('<%=Address1BehaviorID %>')._height" />

Getting compile time error

The 'Animations' property of 'ajaxToolkit:AutoCompleteExtender' does not allow child objects. 

 

 

Wonder if I can attach an animation extender runtime to Autocomplete extender. I will try that next.

Thanks again.

MAC 

 

 

 

Hi mandar109,

As the ClientID of the AutoCompleteExtender is dynamically generated, we need find the correct value for the Animation Script. Notice that the Script in the Animation is different to the normal script, it cannot use the <%%> tag to quote the ServiceProperty. But we can find the ID by sending the animation itself. For example the ScriptAction inside the Sequence tag, its parentAnimation is the OnShow animation, the CompletionListElement is the OnShow’s target, then the AutoCompleteExtender’s Id is:” this._parentAnimation._target.id.replace('_completionListElem', '')”, and so on.

Here is my sample code:

.aspx file 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="SolluTest_AutoComplete.TestPage" %>

<%@ Register src="TestUC.ascx" TagName="TestUC" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--http://forums.asp.net/t/1362679.aspx--%>
    <style type="text/css">
        /*AutoComplete flyout */
        .autocomplete_completionListElement
        {
            visibility: hidden;
            margin: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: 'default';
            overflow: auto;
            height: 200px;
            text-align: left;
            list-style-type: none;
        }
        /* AutoComplete highlighted item */
        .autocomplete_highlightedListItem
        {
            background-color: #ffff99;
            color: black;
            padding: 1px;
        }
        /* AutoComplete item */
        .autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
            padding: 1px;
        }
    </style>

    <script type="text/javascript">

        function initializeSize(id) {
            var behavior = $find(id);
            if (!behavior._height) {
                var target = behavior.get_completionList();
                behavior._height = target.offsetHeight - 2;
                target.style.height = '0px';
            }
        }

        function heightScript(id) {
            return $find(id)._height;
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <uc1:TestUC ID="TestUC1" runat="server" />
    </div>
    <hr />
    <uc1:TestUC ID="TestUC2" runat="server" />
    </form>
</body>
</html>

.ascx file 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestUC.ascx.cs" Inherits="SolluTest_AutoComplete.TestUC" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<asp:TextBox ID="Address" runat="server" Height="19px" MaxLength="100" Width="564px"></asp:TextBox>
<ajaxtoolkit:AutoCompleteExtender runat="server" ID="AddressAutocomplete" TargetControlID="Address"
    ServicePath="AutoComplete1.asmx" ServiceMethod="GetCompletionListByRandom" MinimumPrefixLength="2"
    CompletionInterval="200" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement"
    CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    DelimiterCharacters=";, :">
    <Animations>
        <OnShow>
            <Sequence>
                <OpacityAction Opacity="0" />                    
                <HideAction Visible="true" />                                                            
                <ScriptAction Script="initializeSize(this._parentAnimation._target.id.replace('_completionListElem', ''))"/>                                                            
                <Parallel Duration=".4">                        
                    <FadeIn />                        
                    <Length PropertyKey="height" StartValue="0" EndValueScript="heightScript(this._parentAnimation._parentAnimation._target.id.replace('_completionListElem', ''))" />                    
                </Parallel>
            </Sequence>
        </OnShow>
        <OnHide>
            
            <Parallel Duration=".4">
                <FadeOut />
                <Length PropertyKey="height" StartValueScript="heightScript(this._parentAnimation._target.id.replace('_completionListElem', ''))" EndValue="0" />
            </Parallel>
        </OnHide>
    </Animations>
</ajaxtoolkit:AutoCompleteExtender>

Have it helped?

Best regards,

Zhi-Qiang Ni

Thank You Zhi-Qiang Ni for your generous help.

Animation is working now.

Thanks a ton!

-MAC