AutoComplete Extender - alcuni workaround

by Andrea 04 April 2008 14:04

BoxRicercaStò utilizzando il controllo AutoComplete Extender, contenuto negli Ajax Control Toolkit, e mi sono trovato ad affrontare diversi problemi dovuti a bug del controllo ed altri dovuti a problemi con IE6.
Voglio però sottolineare che grazie alla flessibilità di questi controlli, sono riuscito facilmente a trovare alcuni workaround senza dover scrivere montagne di codice.

Nella mia applicazione mi trovo ad avere un controllo TextBox a cui è collegato l'AutoComplete Extender (per agevolare l'inserimento del testo), e posizionati subito sotto sono presenti alcune DropDownList.

Iniziamo dal primo problema:
con IE6, all'apertura del pannello dell'AutoComplete Extender, le DropDownList rimangono in primo piano, "bucando" il pannello.
La soluzione che ho trovato è stata quella di intervenire nelle animations, inserendo alcuni ActionScript che nascondono le DropDownList quando il pannello si apre, e le rivisualizzano non appena il pannello si stà chiudendo. In questo modo, l'AutoComplete Extender sarà visualizzato senza problemi grafici.

Altro problema:
alla chiusura del pannello non riuscivo più a modificare il valore delle DropDownList perchè il pannello viene nascosto impostando lo stile visibility, che lo fa quindi mantere in primo piano, bloccando l'accesso ai controlli posti sotto.
La soluzione più veloce è stata quella di intervenire anche qui nelle ActionScript, recuperandomi l'oggetto del pannello (che ha l'ID composto da BehaviorID__completionListElem) e settandogli la proprietà display a none. Facendo così, il pannello non risulta più essere in primo piano, e si ha l'accesso ai controlli in precedenza bloccati.

Ecco qui il codice per risolvere questi due problemi:

<ajaxToolkit:AutoCompleteExtender 
    runat="server" 
    BehaviorID="AutoCompleteEx" 
    ID="autoComplete1"
    TargetControlID="CittaCod" 
    ServiceMethod="GetCityList" 
    ServicePath="~/Services.asmx"
    MinimumPrefixLength="2" 
    CompletionInterval="1000" 
    FirstRowSelected="true" 
    EnableCaching="true"
    CompletionSetCount="20" 
    CompletionListCssClass="autocomplete_completionListElement"
    CompletionListItemCssClass="autocomplete_listItem" 
    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
    <Animations>
    <OnShow>
        <Sequence>
            <OpacityAction Opacity="0" />
            <HideAction Visible="true" />
            <ScriptAction Script="
                var behavior = $find('AutoCompleteEx');
                if (!behavior._height) {
                    var target = behavior.get_completionList();
                    behavior._height = target.offsetHeight - 2;
                    target.style.height = '0px';
                }" />
            <Parallel Duration=".4">
                <FadeIn />
                <Length PropertyKey="height" 
                        StartValue="0" 
                        EndValueScript="$find('AutoCompleteEx')._height" />
            </Parallel>                                
            <ScriptAction Script="                 
                var ddlPrezzoMin = $get(ddlPrezzoMinID);
                var ddlPrezzoMax = $get(ddlPrezzoMaxID);
                var ddlMqMin = $get(ddlMqMinID);
                var ddlMqMax = $get(ddlMqMaxID);
                
                ddlPrezzoMin.style.visibility = 'hidden';
                ddlPrezzoMax.style.visibility = 'hidden';
                ddlMqMin.style.visibility = 'hidden';
                ddlMqMax.style.visibility = 'hidden'; 
                " />
        </Sequence>
    </OnShow>
    <OnHide>
        <Sequence>
            <ScriptAction Script="    
                var ddlPrezzoMin = $get(ddlPrezzoMinID);
                var ddlPrezzoMax = $get(ddlPrezzoMaxID);
                var ddlMqMin = $get(ddlMqMinID);
                var ddlMqMax = $get(ddlMqMaxID);
                
                ddlPrezzoMin.style.visibility = 'visible';
                ddlPrezzoMax.style.visibility = 'visible';
                ddlMqMin.style.visibility = 'visible';
                ddlMqMax.style.visibility = 'visible';
                
                var autoCompleteElement = $get('AutoCompleteEx_completionListElem');
                autoCompleteElement.style.display = 'none';                                    
                " />
            <Parallel Duration=".4">
                <FadeOut />
                <Length 
                    PropertyKey="height" 
                    StartValueScript="$find('AutoCompleteEx')._height" 
                    EndValue="0" />
            </Parallel>
        </Sequence>
    </OnHide>
    </Animations>
</ajaxToolkit:AutoCompleteExtender>

 

Tags: , , , ,

ASP.NET AJAX

Comments are closed