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>

You can try DropDownList1.Attributes.Add("Size", "10"); OR Why not use aspnet ListBox instead? ListBox provides an auto scrollbars when the item is larger than the size of the List — LifeOfPi, Jun 30 '16 at 07:20

score 4 · Answer 1 · answered Jun 30 '16 at 07:59

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;
    }

score 0 · Answer 2 · answered Jun 30 '16 at 07:26

0

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>

answered Jun 30 '16 at 07:26

SharK

2,155
1
20
28

score 0 · Answer 3 · answered Jun 30 '16 at 07:27

0

you can use Size attribute

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

answered Jun 30 '16 at 07:27

Kahbazi

14,331
3
45
76

Thanks for quick response..but size attribute not working. – Kuldip Rana Jun 30 '16 at 07:34

score 0 · Answer 4 · answered Jun 30 '16 at 07:45

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

Asp.Net Dropdownlist Set Item View limit

4 Answers4