Asp.Net Dropdownlist Set Item View limit

Question

I have a country DropDownList in Asp.Net Page.I Bind DropDownList from Database. it gives me 239 item. and it is very large scroll in page.

so, my Question how to set 10 item in Dropdown and then scroll in List.

<asp:DropDownList ID="ddlcountry" AutoPostBack="true" AppendDataBoundItems="true"
     runat="server" OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged">
</asp:DropDownList>

Answer 1

You can set it in two ways.

One is,

    <asp:DropDownList ID="DropDownList1" runat="server" Height="50px" 
Style="position: static"> </asp:DropDownList>

or

<asp:DropDownList ID="DropDownList1" size="10" runat="server"></asp:DropDownList> 

Answer 2

you can use Size attribute

<asp:DropDownList Size="10" ID="ddlcountry" AutoPostBack="true"  AppendDataBoundItems="true"
 runat="server"  OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged"/>

Answer 3

Why use scrolling use select2 search plugins.

Select2 Example

1.Reference select2.css and select2.js in your .aspx file

2.

 <asp:DropDownList ID="ddlProductSubType" runat="server" ClientIDMode="Static" AppendDataBoundItems="True">
                                        <asp:ListItem Value="">Select</asp:ListItem>

                                    </asp:DropDownList>

3.

  <script>
      $(function() {
          $('#ddlProductSubType').select2({
              placeholder: 'select a state',
              //tags: "true",
              //allowClear: true,
              theme: "classic"
          });
});
  </script>

N.B i have used it and it respond well upto 3,000 dropdown list items.If you want to filter/on demand loading , option is there in select2 documentation

Answer 4

Actually this is very interesting and tricky task , we need to do some configuration and apply some css for this

Since DropDownList does not have inbuilt scroll bars so we need to do it manually by using OnMouseDown, OnFocusOut,OnDblClick properties

<asp:DropDownList ID="ddlcountry" AutoPostBack="true" AppendDataBoundItems="true"
     runat="server" 
     CssClass="DDlCountry"  
     OnMouseDown="this.size=5;" 
     OnFocusOut="this.size=1;" 
     OnDblClick="this.size=1;">
</asp:DropDownList> 

Add new CSS Class for this DDlCountry

.DDlCountry {
        width: 128px;
        margin: 0 15px 0 0;
        font: 12px tahoma;
        max-height: 200px;
        overflow-y: scroll;
        position: relative;
    }