locked
Filtering a dropdownlist (listsearchextender, combobox, autocompleteextender) RRS feed

  • Question

  • User-214224949 posted

    What I want is probably a pretty common request, but I would like to know if it can be managed with these controls (or any other pre-built ones).  I've used AJAX in the past, but not for this.

    I want to have 'Br' and have my databound dropdownlist filtered to only show "Brandon", "Brittany", etc.  I can search and find the top-most matching one (list is alphabetical) with the listsearchextender or the combobox.  I can only show the matches with the autocomplete extender and a textbox.  But I want the drop-down select (not just type-in) to be available, and, because the list is long, the filtering ability.

    If there's a way to force the dropdown list to always appear below (even when there isn't a lot of space), I can probably use the listboxextender.  But because the list is long, and the control is in the middle of the page, the list pops up and covers the prompt, so the user can't see what they've already typed (user may need to backspace, etc.).

    Thursday, February 6, 2014 1:59 PM

Answers

  • User-933407369 posted

    you can check out the ListSearchExtender sourcecode  below and try to modify the js file , as shown below:

      // Hook up a PopupBehavior to the promptDiv
               this._popupBehavior = $create(AjaxControlToolkit.PopupBehavior, { parentElement : element }, {}, {}, this._promptDiv);
               if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Bottom) {
                    this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.BottomLeft);
               } else if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Top) {
                   this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.TopLeft);
               } else {
                   this._popupBehavior.set_x(getLeftOffset());// compute those offset values based on whether left or right was passed for the prompt position
                  this._popupBehavior.set_y(getTopOffset()); // see popup control behavior on how it does that
               } 
    

    I suggest that you can consult your issue on ASP.NET AJAX: http://ajaxcontroltoolkit.codeplex.com/workitem/list/basic  for better solution and support. AJAX Experts there will further research this issue and provide you better support.

    Thank you for your understanding.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 10, 2014 4:36 AM

All replies

  • User-933407369 posted

    hi Tzigone,

    the list pops up and covers the prompt, so the user can't see what they've already typed (user may need to backspace, etc.).

    i create the demo below, it is working for me perfectly:

    <%@ Page Language="C#" AutoEventWireup="true" %>  
    <%@ Import Namespace="System.Drawing" %>  
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <script runat="server">  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if(!Page.IsPostBack)  
            {  
                DropDownList1.ForeColor = Color.SaddleBrown;  
                DropDownList1.BackColor = Color.Snow;  
                DropDownList1.Font.Size = FontUnit.Large;  
                string[] colorList = Enum.GetNames(typeof(KnownColor));  
                DropDownList1.DataSource = colorList;  
                DropDownList1.DataBind();  
            }  
        }  
    </script>  
    <html xmlns="http://www.w3.org/1999/xhtml" >  
    <head id="Head1" runat="server">  
        <title>Ajax ListSearchExtender and DropDownList - How to use</title>  
        <style type="text/css">  
            .PromptCSS  
            {  
                color:Orchid;  
                font-size:large;  
                font-style:italic;  
                font-weight:bold;  
                background-color:Snow;  
                border:solid 1px Orchid;  
                height:30px;  
                }  
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div>  
            <h2 style="color:DarkBlue; font-style:italic;">Ajax ListSearchExtender Example: Using DropDownList</h2>  
            <hr width="550" align="left" color="LightBlue" />  
          <%--  <asp:ScriptManager   
                ID="ScriptManager1"  
                runat="server"  
                >  
            </asp:ScriptManager>  --%>
            <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
            <cc1:ListSearchExtender   
                ID="ListSearchExtender1"  
                runat="server"  
                TargetControlID="DropDownList1"  
                PromptCssClass="PromptCSS"  
                >  
            </cc1:ListSearchExtender>  
            <br /><br />  
            <asp:DropDownList   
                ID="DropDownList1"  
                runat="server"  
                >  
            </asp:DropDownList>  
        </div>  
        </form>  
    </body>  
    </html> 
    

    please ccheck out the codes above, if it is not helpful for you, you provide any additional code or markup related to this issue.

    It may be a bit easier to resolve if it can be easily reproduced.

    Thank you for your understanding.

     

    Friday, February 7, 2014 6:25 AM
  • User-214224949 posted

    I'm not sure if I was clear enough.  Your code (aside from a different style) is the same as mine.  What I meant was that the dropdown list opens upwards instead of downwards (as a ddl without an extender will also do) because the list is long (hundreds of items long) and the ddl is lower in the page.  So when I click on the dropdownarrow, the list opens with the top item of the lislt at teh very top of my screen, on the title bar.  If I set my resolution higher, it will open below, as I want it to.  However, we need to display correctly at 1024 x 768.  I tried setting max-height for the dropdown list to make it shorter, and that worked for Safari, Chrome, and Firefox, but not for IE 8.  But since I just found this morning that our internal users are supposed to get their XP machines replaced soon, and I think most external users probably already have newer versions, I'll see if my boss is okay with that.  And start searching for max-height solutions in IE8.

    Friday, February 7, 2014 9:08 AM
  • User-933407369 posted

    you can check out the ListSearchExtender sourcecode  below and try to modify the js file , as shown below:

      // Hook up a PopupBehavior to the promptDiv
               this._popupBehavior = $create(AjaxControlToolkit.PopupBehavior, { parentElement : element }, {}, {}, this._promptDiv);
               if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Bottom) {
                    this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.BottomLeft);
               } else if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Top) {
                   this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.TopLeft);
               } else {
                   this._popupBehavior.set_x(getLeftOffset());// compute those offset values based on whether left or right was passed for the prompt position
                  this._popupBehavior.set_y(getTopOffset()); // see popup control behavior on how it does that
               } 
    

    I suggest that you can consult your issue on ASP.NET AJAX: http://ajaxcontroltoolkit.codeplex.com/workitem/list/basic  for better solution and support. AJAX Experts there will further research this issue and provide you better support.

    Thank you for your understanding.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 10, 2014 4:36 AM