CODEWITHSUNDEEP
c#asp.netdrop-down-menuasp.net-controls
Kuldip Rana
Kuldip Rana

Reputation: 131

Asp.Net Dropdownlist Set Item View limit

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>

Upvotes: 2

Views: 10361

Answers (4)

Jaydip Jadhav
Jaydip Jadhav

Reputation: 12309

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

Upvotes: 4

Syed Mhamudul Hasan
Syed Mhamudul Hasan

Reputation: 1349

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

Upvotes: 0

Kahbazi
Kahbazi

Reputation: 15015

you can use Size attribute

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

Upvotes: 0

SharK
SharK

Reputation: 2215

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>

Upvotes: 0

Related Questions