locked
Multi Select Filter For My Dropdownlist using jquery RRS feed

  • Question

  • User-807418713 posted

    Hello

    I want to make my dropdownlist as below

    It should select multi filter with search option

    How to do so

    Wednesday, September 4, 2019 6:56 PM

Answers

  • User-719153870 posted

    Hi Gopi.MCA,

    if user type any word it has to filter CheckBoxList1 from that user will select records

    This will only need to change the selectcommond you used to bind your checkboxlist's data.

    Please refer to below code:

    ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            
            <asp:UpdatePanel ID="updatepanel1" runat="server">
    
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
                    <ajaxToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server"
                        Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" 
                        PopupControlID="Panel1" OffsetY="22">
                    </ajaxToolkit:PopupControlExtender>
                    <asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px" 
                         BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight"
                         ScrollBars="Auto" BackColor="#CCCCCC" Style="display: none">
                       
                        <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                              DataSourceID="SqlDataSource1" DataTextField="UName"
                             DataValueField="UName" AutoPostBack="True"
                            OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                        </asp:CheckBoxList>
    
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True"
                            SelectCommand="SELECT [UName] FROM [Users]"> 
                         </asp:SqlDataSource>
                    </asp:Panel>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </ContentTemplate>
    
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>

    .CS:

    protected void Button1_Click(object sender, EventArgs e)
            {
                SqlDataSource1.SelectCommand = "select UName from Users where UName like '%" + TextBox1.Text + "%'";
            }

    And below is the result:

    Notice: i thought i would be able to do this rebind job dynamically, i mean do this in the textbox's onkeyup event.

    However, in the updatepanel and the whole webform application, it seems really hard.

    I have tried ajax and other little trick thing, but all failed.

    I think use a button to postback the value is the only way current time.

    Sorry.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2019 7:30 AM

All replies

  • User-719153870 posted

    Hi Gopi.MCA,

    As far as i know, you can't choose muliple options in a dropdownlist control. However, you can do this with a checkboxlist control.

    Here are several links you can refer to build your own practice demo:

    MultiSelect Dropdown in ASP.NET

    Multiselect Dropdown in Asp.net 4.0 using C#

    Below is a demo built based on the second link:

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultiChoiceDDLDemo.aspx.cs" Inherits="WebFormDemo01_No_Authentication_.MultiChoiceDDLDemo" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="updatepanel1" runat="server">
    
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
    
                    <ajaxToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server"
                        Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" 
                        PopupControlID="Panel1" OffsetY="22">
                    </ajaxToolkit:PopupControlExtender>
    <asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px" BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC" Style="display: none"> <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="UName" DataValueField="UName" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"> </asp:CheckBoxList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="SELECT [UName] FROM [Users]"> </asp:SqlDataSource> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

    .CS:

    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                string name = "";
                for (int i = 0; i < CheckBoxList1.Items.Count; i++)
                {
                    if (CheckBoxList1.Items[i].Selected)
                    {
                        name += CheckBoxList1.Items[i].Text + ",";
                    }
                }
                TextBox1.Text = name;
            }

    And the result:

    Of course, a better ui design should be yourself's work which you can refer to: DropDown UI.

    Best Regard,

    Yang Shen

    Thursday, September 5, 2019 2:41 AM
  • User-807418713 posted

    Hello Yang Shen

    My CheckBoxList1 has huge data if user type any word it has to filter CheckBoxList1 from that user will select records

    Thanking You

    Thursday, September 5, 2019 3:48 AM
  • User-719153870 posted

    Hi Gopi.MCA,

    if user type any word it has to filter CheckBoxList1 from that user will select records

    This will only need to change the selectcommond you used to bind your checkboxlist's data.

    Please refer to below code:

    ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            
            <asp:UpdatePanel ID="updatepanel1" runat="server">
    
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
                    <ajaxToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server"
                        Enabled="True" ExtenderControlID="" TargetControlID="TextBox1" 
                        PopupControlID="Panel1" OffsetY="22">
                    </ajaxToolkit:PopupControlExtender>
                    <asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px" 
                         BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight"
                         ScrollBars="Auto" BackColor="#CCCCCC" Style="display: none">
                       
                        <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                              DataSourceID="SqlDataSource1" DataTextField="UName"
                             DataValueField="UName" AutoPostBack="True"
                            OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                        </asp:CheckBoxList>
    
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True"
                            SelectCommand="SELECT [UName] FROM [Users]"> 
                         </asp:SqlDataSource>
                    </asp:Panel>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </ContentTemplate>
    
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>

    .CS:

    protected void Button1_Click(object sender, EventArgs e)
            {
                SqlDataSource1.SelectCommand = "select UName from Users where UName like '%" + TextBox1.Text + "%'";
            }

    And below is the result:

    Notice: i thought i would be able to do this rebind job dynamically, i mean do this in the textbox's onkeyup event.

    However, in the updatepanel and the whole webform application, it seems really hard.

    I have tried ajax and other little trick thing, but all failed.

    I think use a button to postback the value is the only way current time.

    Sorry.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2019 7:30 AM