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.).
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.
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
}
Member
14 Points
15 Posts
Filtering a dropdownlist (listsearchextender, combobox, autocompleteextender)
Feb 06, 2014 01:59 PM|Tzigone|LINK
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.).
All-Star
15648 Points
2151 Posts
Re: Filtering a dropdownlist (listsearchextender, combobox, autocompleteextender)
Feb 07, 2014 06:25 AM|Happy Chen - MSFT|LINK
hi Tzigone,
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.
Member
14 Points
15 Posts
Re: Filtering a dropdownlist (listsearchextender, combobox, autocompleteextender)
Feb 07, 2014 09:08 AM|Tzigone|LINK
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.
All-Star
15648 Points
2151 Posts
Re: Filtering a dropdownlist (listsearchextender, combobox, autocompleteextender)
Feb 10, 2014 04:36 AM|Happy Chen - MSFT|LINK
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.