locked
Autocompleteextender And ScrollBar RRS feed

  • Question

  • User-2084220956 posted

    I apologize in advance if I have missed this post elsewhere, but I have looked and not seen this particular issue.

     

    I am running both IE 7 and Firefox 2.0.  I have created a panel on my page and set the CompletionListElementID to the panel's ID.  I set the scroll bars to vertical on the panel and everything seems to look alright on IE 7 until I go and click on the scroll bar.  As soon as I click on the scroll bar it scrolls down briefly and then hides the drop down panel.  In firefox the scroll bar is not displayed at all just a huge list of text.

     Any ideas would be much appreciated.

     

    Josh


     

    Monday, October 30, 2006 9:41 AM

Answers

  • User535736832 posted

    This is an issue with AjaxControlToolkit.

    You can find workaround at http://aadreja.blogspot.com/2009/07/clicking-autocompleteextender-scrollbar.html



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 8, 2009 1:37 AM

All replies

  • User-738500773 posted

    I'm running into the same thing.  I've tried divs and panels to no avail.

    Any luck?

    Tuesday, November 21, 2006 9:08 PM
  • User642382989 posted
    same here, I can use the wheel button on mouse to scroll down but as soon as I move the pointer to use the scroll buttons the panel is hidden...
    Friday, December 8, 2006 7:10 AM
  • User-556379298 posted

    I have the same problem.. Has anyone figured out a solution for this?
    It would be greatly appreciated!!

     

    K. 

    Monday, December 18, 2006 6:28 AM
  • User1307175537 posted

    Ditto here. It's a pretty big part of most of our user req's, I hope this is a problem that will be solved passed RC.

    Monday, December 18, 2006 5:14 PM
  • User642382989 posted
    I was having too many calls from users who couldn't manipulate the AutoCompleteExtender and since there is no solution to this I changed to a DropDownList / UpdatePanel solution which was very easy to code. It's very usable and I don't think I will revert to the AutoCompleteExtender.
    Monday, December 18, 2006 5:35 PM
  • User-1207580768 posted

    Dear All,

    Can anyone tell me how i can implement autocomplete extender with scroll bar ?  I have a  drop down of over  100 lists. 

    Any ideas would be appreciated.

     

    Thursday, March 1, 2007 10:37 AM
  • User-1207580768 posted

    Dear All,

    Can anyone tell me how i can implement autocomplete extender with scroll bar ?  I have a  drop down of over  100 lists. 

    Any ideas would be appreciated.

     

    Saturday, March 3, 2007 4:29 PM
  • User-1239929909 posted

    Dear All,

    I would be interested in a fix for the autocompleteextender scroll.  I'd be surprised if this isn't high up on the priorities list as I believe a working vertical scrollbar it is a crucial component.  I have tried lots of css styling to the div container and the inner divs but am unable to stop the dropdown from disappearing when clicking on the scrollbar.  My client has accepted MS AJAX.NET but I don't think they will accept other third-party dlls.  I would be interested in any pointers to alternative methods just using standard AJAX.NET and ASP.NET controls.  If Dabbi2000 can explain his workaround and it fits within my contraints I'd be very interested in some explanation of how it works.

    Friday, March 9, 2007 7:23 AM
  • User-8214731 posted
    Any progress on a solution here?
    Friday, April 20, 2007 10:23 AM
  • User-1239929909 posted
    I thought I would abandon the autocomplete because my feelings are that it is difficult to get to work at the best of times.  I have tried to resurect it in my project again but now I can't get the panel to display, so once again I am foiled.  I had thought that instead of the autocomplete, the ListView extender would come to my rescue, but unfortunately I have 700 potential entries (not exceptionally large!) in my list and despite multiple attempts to overcome major performance hurdles, I think once again I have found an Ajax.net control that in its present state, has major issues.  The story with the listviewextender should really be posted elsewhere but a brief synopsis can reveal that with viewstate turned on my list causes an unacceptable performance hit, and with viewstate turned off and binding coming from cache (very little server-side delay), there is still a major client-side performance hit when the list is rebound within an updatepanel (all events on the form are delayed unacceptably.)  Is there anybody out there who can restore my faith that there is a control or a workaround, with little performance penalty, that can enable me to do predictive searches on lists (in Ajax.Net)?  I thought my next route to ruin and disfavour with my employer would be to use the popupcontrolextender and try and somehow shoehorn some kind of predictive search into it, or out of shear frustration open up a new popup window (aka Web 1.0) and allow my client to bring back a value to my main page (yuk!!)  Please can someone from the Ajax.Net team please reassure me, and the good people of this post, that we haven't made a fatal mistake in prematurely promising Ajax technology to our professional clients?
    Monday, April 23, 2007 8:26 AM
  • User1869194011 posted

    Is there any solution for this problem?

    Tuesday, April 24, 2007 4:07 AM
  • User-1239929909 posted
    I don't know what the status of the autocomplete ajax extender is, but I have learnt much over the last couple of months and written my own using the Ajax Toolkit Popup Extender.

    I didn't however, go the full hog and create my own extender, and I'm sure there are improvements that can be made and I haven't fully tested this, but here's some code anyway.  The basic gist is that I attached a PopupControl Extender to a textbox, and created some client callback functionality to call back to the server and return some results into a listbox that is contained in the Popup panel (I also appended my textbox's ClientID to my script names so that my user control can be used multiple times on my page):

    The aspx user control code :
    ======================

    <%@ Control Language="C#" CodeFile="MuppetPopup.ascx.cs" Inherits="MyNamespace.WebUI.MuppetPopup"%>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <asp:TextBox ID="txtMuppet" EnableViewState="true"  ValidationGroup="Instruction" Wrap="false" TextMode="SingleLine" runat="server" CssClass="Muppet"></asp:TextBox>
    <asp:Panel ID="pnlMuppetDropdown" CssClass="Muppet MuppetPopupControl" EnableViewState="true" runat="server">
        <asp:UpdatePanel ID="UpdatePanelPopup" runat="server">
            <ContentTemplate>
                <asp:ListBox ID="lstMuppets" CssClass="PopupList" SelectionMode="Single" runat="server"></asp:ListBox>       
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
    <cc1:PopupControlExtender ID="MuppetPopupExtender" runat="server" PopupControlID="pnlMuppetDropdown" TargetControlID="txtMuppet" CommitProperty="value" Position="bottom" OffsetX="-1" OffsetY="-2" >
    </cc1:PopupControlExtender>
    <cc1:FilteredTextBoxExtender ID="MuppetFilter" TargetControlID="txtMuppet" runat="server">
    </cc1:FilteredTextBoxExtender>


    The css styles :
    ============

    .MuppetPopupControl
    {
        ;
        visibility:hidden;
        border: 0px outset white;
        height: 200px;
        overflow: hidden !important;
        z-index : 1004;
    }

    .PopupList
    {
        ;
        overflow:scroll;
        width:100%;
        height:100%;
        color:windowtext;
        background-color:window;
    }

    .Muppet
    {
        width:145px;
    }



    Some of my code behind :
    =====================

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Collections.Generic;

    namespace MyNamespace.WebUI
    {
        public partial class MuppetPopup : MyNamespace.WebUI.BaseUserControl, ICallbackEventHandler
        {

            /* Callback Event reference and argument */
            string callBackFunctionInvocation;
            string callbackArg;


            private string GetMuppetList(String prefix)
            {
                /***** Get your list data here !!! ****/

               muppets = blah.....

                /* Now parse the list and create a pipe-delimited list as a string */

                string delimitedMuppetList = string.Empty;

                foreach (Muppet muppet in muppets)
                {
                    delimitedMuppetList += muppet.Name+ "|";
                }
                return delimitedMuppetList;
            }

            public void RaiseCallbackEvent(string eventArgument)
            {
                /* The event argument will contain the Muppet Nameprefix */
                callbackArg = GetMuppetList(eventArgument);
            }

            public string GetCallbackResult()
            {
                return callbackArg;
            }

            protected override void OnInit(EventArgs e)
            {
                // Be sure to call the base class's OnInit method!
                base.OnInit(e);

                /* Create the BehaviorID so that we can call client-side events directly on the Popup extender */
                MuppetPopupExtender.BehaviorID = "MuppetPopupBehavior" + txtMuppet.ClientID;
            }

            protected override void OnPreRender(EventArgs e)
            {
                // Be sure to call the base class's OnPreRender method!
                base.OnPreRender(e);

                if (!IsPostBack)
                {
                    if (!Page.ClientScript.IsClientScriptBlockRegistered("GetMuppetList" + txtMuppet.ClientID))
                    {
                        /* This script gets the text typed into the textbox and
                         * initiates a callback to this controls server side events
                         * and the callback event handlers get a list of Muppet
                         * names in a pipe delimited string.  The callback automatically
                         * handles the firing of the populateMuppetList script which populates
                         * the control on the client side */
                        callBackFunctionInvocation =
                            Page.ClientScript.GetCallbackEventReference(this, "muppetPrefix", "populateMuppetList" + txtMuppet.ClientID, "context");

                        string scriptString = @"<script type=""text/javascript"">" +
                            "function getMuppetList" + txtMuppet.ClientID + "() {" +
                            "   var muppetPrefix = $get('" + txtMuppet.ClientID + "').value;" +
                            "   var context = '';" +
                            callBackFunctionInvocation + ";" +
                            "} </script>";

                        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                            "GetMuppetList" + txtMuppet.ClientID, scriptString, false);
                    }

                    if (!Page.ClientScript.IsClientScriptBlockRegistered("PopulateMuppetList" + txtMuppet.ClientID))
                    {
                        /* After a callback, this script receives the pipe delimited
                         * list of Muppet names and refreshes the selection list */
                        string scriptString = @"<script type=""text/javascript"">" +
                            "function populateMuppetList" + txtMuppet.ClientID + "(arg, context) {" +
                            "   var muppetNames = arg.split('|');" +
                            "   var muppetSel = $get('" + lstMuppets.ClientID + "');" +
                            "   var i;" +
                            "   for (i = muppetSel.length - 1; i>=0; i--) {" +
                            "       muppetSel.remove(i);" +
                            "   }" +
                            "   var j;" +
                            "   var newOption;" +
                            "   for (j = 0; j < muppetNames.length - 1; ++j) {" +
                            "       newOption = document.createElement('option');" +
                            "       newOption.text = muppetNames[j];" +
                            "       newOption.value = muppetNames[j];" +
                            "       try {" +
                            "           muppetSel.add(newOption, null);" +
                            "       }" +
                            "       catch(ex) {" +
                            "           muppetSel.add(newOption);" +
                            "       }" +
                            "   }" +
                            "}" +
                            "</script>";

                        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                            "PopulateMuppetList" + txtMuppet.ClientID, scriptString, false);
                    }

                    if (!Page.ClientScript.IsClientScriptBlockRegistered("SetMuppetValue" + txtMuppet.ClientID))
                    {
                        /* Sets the value of the textbox */
                        string scriptString = @"<script type=""text/javascript"">" +
                            "function setMuppetValue" + txtMuppet.ClientID + "() {" +
                            "   var muppetSel = $get('" + lstMuppets.ClientID + "');" +
                            "   var i;" +
                            "   for (i = 0; i <= muppetSel.length - 1; ++i) {" +
                            "       if (muppetSel[i].selected) {" +
                            "           $get('" + txtMuppet.ClientID + "').value = muppetSel[i].text;" +
                            "           hidePopup" + txtMuppet.ClientID + "();" +
                            "       }" +
                            "   }" +
                            "} </script>";

                        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                            "SetMuppetValue" + txtMuppet.ClientID, scriptString, false);
                    }

                    if (!Page.ClientScript.IsClientScriptBlockRegistered("DoPopupKey" + txtMuppet.ClientID))
                    {
                        /* Handles all keypresses associated with popup */
                        string scriptString = @"<script type=""text/javascript"">" +
                            "function doPopupKey" + txtMuppet.ClientID + "(e) {" +
                            "   var keynum;" +
                            "   if(window.event) {" +
                            "       keynum = e.keyCode;" +
                            "   }" +
                            "   else if(e.which) {" +
                            "       keynum = e.which;" +
                            "   }" +
                            /* Enter key */
                            "   if(keynum == 13) {" +
                            "       setMuppetValue" + txtMuppet.ClientID + "();" +
                            "   }" +
                            "} </script>";

                        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                            "DoPopupKey" + txtMuppet.ClientID, scriptString, false);
                    }

                    if (!Page.ClientScript.IsClientScriptBlockRegistered("HidePopup" + txtMuppet.ClientID))
                    {
                        /* Calls the Popup Behavior's hidePopup event */
                        string scriptString = @"<script type=""text/javascript"">" +
                            "function hidePopup" + txtMuppet.ClientID + "() {" +
                            "   $find('MuppetPopupBehavior" + txtMuppet.ClientID + "').hidePopup();" +
                            "} </script>";

                        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                            "HidePopup" + txtMuppet.ClientID, scriptString, false);
                    }

                    txtMuppet.Attributes.Add("onkeyup", "getMuppetList" + txtMuppet.ClientID + "();");
                    txtMuppet.Attributes.Add("onclick", "getMuppetList" + txtMuppet.ClientID + "();");

                    pnlMuppetDropdown.Attributes.Add("onclick", "setMuppetValue" + txtMuppet.ClientID + "();");

                    lstMuppets.Attributes.Add("onkeypress", "doPopupKey" + txtMuppet.ClientID + "(event);");
                }
            }
        }
    }
    Tuesday, June 5, 2007 9:01 AM
  • User-1091210821 posted

    Sorry folks I havent tried this but things in the toolkit are supposedly not supported. Can anybody guide me of a good tutorial of writing your own toolkit stuff, i.e. controls etc.

    Tuesday, June 5, 2007 9:38 AM
  • User-967328070 posted

    Well, I found a blog post that said how to do it. It was a bit old and referenced a nonexistant property though. Here is how you can get it to work with the current version of the toolkit.

     set this property of the extender

    CompletionListElementID="autocompleteDropDownPanel"

    and then add a panel like this to the page

    <asp:Panel ID="autocompleteDropDownPanel" runat="server" ScrollBars="Vertical" />

    Hope this helps

    Tuesday, March 18, 2008 5:43 PM
  • User972093737 posted

    I realize several things about the Ajax Toolkit:

    1) It's free

    2) It can't be easy creating all these controls seeing as how some of them replace what would take many, many lines of javascript

    3) I'm sure the developers, who are all way better programmers than me, spent loads of hours developing the controls late into the evening for little pay

    But with all that said I'm EXTREMELY disappointed at some of the bugs in these controls.  I'm talking about bugs that force you to abandon a control because of totally obnoxious behavior.   This autocompleteextender vertical scrollbar issue is just another example.  So after spending half a day building the webservice etc and trying to research why it's not working I will have to tear out the control and put in a real solution.  When I first read about Ajax I thought it would save me a few weeks on every project.  As it turns out it's actually added a few weeks based on the approximately half dozen controls I've read up on, implemented, and then ultimately scrapped.  Peeved.

    Tuesday, May 6, 2008 4:13 PM
  • User254410503 posted

    If the scrollbar is not critical to your application, you can at least remove it to prevent people from clicking on it. You can do this by modifying the css class defined in the CompletionListCssClass property. The css class should set overflow : visible; to disable the scrollbar. You should set the css height to 300px and CompletionSetCount property to something like 15.

    FYI I define the following:

    .autocomplete_completionListElement

        visibility : hidden;
        margin : 0px!important;
        background-color : White;
        color : windowtext;
        border : buttonshadow;
        border-width : 1px;
        border-style : solid;
        cursor : 'default';
        overflow : visible;
        height : 300px;
        text-align : left;
        list-style-type : none;
    }

    <ajax:AutoCompleteExtender ID="tbUser_AutoCompleteExtender" runat="server"
                MinimumPrefixLength="1"
                Enabled="True"
                TargetControlID="tbUser"
                EnableCaching="true"
                CompletionSetCount="15"
                CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem"
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                >

    Wednesday, June 11, 2008 3:14 PM
  • User1191518856 posted

    Seems this problem is two-fold:

    1) To prevent having a long completion list stretch beyond screen boundaries - set a fixed height (or even better a max-height) in the CSS, and also make sure you set overflow: auto. Use CompletionListCssClass in conjunction with a stylesheet. Then you'll get a nice scrollbar to play with.

    2) If you experience that the completion list disappears when you click the scrollbar, it may be caused by AutoPostBack set to true on the asociated TextBox. Try changing AutoPostBack to false to avoid this.

    Thursday, May 14, 2009 12:11 PM
  • User535736832 posted

    This is an issue with AjaxControlToolkit.

    You can find workaround at http://aadreja.blogspot.com/2009/07/clicking-autocompleteextender-scrollbar.html



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 8, 2009 1:37 AM
  • User-1256377279 posted

    Hi guys


    I am still facing the same problem of Scroll because i am using old version of Ajax Control Toolkit i.e. 1.0.10301.0 i can't upgrade to New version because i have huge application which contains other Ajax Controls with old version.

    So please me.


    Thanks in advance



    Friday, October 30, 2009 6:55 AM
  • User787128076 posted

    I know this is an old post, but here is how I did it.  I am using a <div> for my CompletionListElementID.  Here is my code behind:

    --%>                <asp:TextBox ID="battersTextbox" runat="server"></asp:TextBox>&nbsp;
                        <div id="battersCompletionListDiv"></div>
                        <ajax:AutoCompleteExtender
                            ID="battersAutoCompleteExtender"
                            BehaviorID="battersAutoComplete"
                            runat="server"
                            CompletionInterval="1"
                            CompletionSetCount="5"
                            EnableCaching="true"
                            MinimumPrefixLength="2"
                            ServiceMethod="getPlayers"
                            ServicePath="playersWebService.asmx"
                            TargetControlID="battersTextbox"
                            OnClientItemSelected="batterSelected"
                            CompletionListElementID="battersCompletionListDiv"
                            >
                            <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('battersAutoComplete');
                                            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('battersAutoComplete')._height" />
                                        </Parallel>
                                    </Sequence>
                                </OnShow>
                                <OnHide>
                                    <%-- Collapse down to 0px and fade out --%>
                                    <Parallel Duration=".4">
                                        <FadeOut />
                                        <Length PropertyKey="height" StartValueScript="$find('battersAutoComplete')._height" EndValue="0" />
                                    </Parallel>
                                </OnHide>
                            </Animations>
                        </ajax:AutoCompleteExtender>


    And here is the code from my stylesheet:

    .AutocompleteList
    {
        width: auto !important;
        border-bottom: black thin solid;
        border-left: black thin solid;
        border-top: black thin solid;
        border-right: black thin solid;
        text-align: left;
        text-indent: 0%;
        padding-left: 3px;
        padding-right: 3px;
        padding-bottom: 3px;
        list-style-type: none;
        margin: 3px;
        padding-top: 3px;
        background-color: white;
        height: 25%;
        overflow: auto;
    }

    Wednesday, July 21, 2010 8:52 AM
  • User1708785966 posted

    include Height="100" to te Panel

    Wednesday, April 22, 2015 1:42 PM