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

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