There have been a few questions on this forum about a very annoying aspect of the DropDownList control:that it does not allow the user to set the height of it's vertical scrollbar.
I have given up trying to change it but am I correct in saying that the CascadingDropDown control of the Ajax Control Toolkit does indeed (drumroll!) have a vertical scrollbar?
I have seen one working example online where it does seem to have a vertical scrollbar:
That is from this video tutorial:
http://aspalliance.com/videos/AtlasCascadingDropDownListControl/AtlasCascadingDropDownListControl_media/AtlasCascadingDropDownListControl.wmv
I d'loaded the code for the code for the above example but I wasn't able to get it working (don't ask).
In any case it's not really what I want as it requires an ASP DropDownList control to work. Most examples of the CascadingDropDown seem to be used in this way (ie it is populated when an item is selected first from an ASP DropDownList control).
Is there any working example of a CascadingDropDown where it connects directly to a table itself?
I would greatly appreciate any guidance, thank you.
set the height property of the Dropdown list, then you will get a scroll bar if the contents are more then the height.
Tried that already, doesn't work:
<asp:DropDownList ID="DrCountries" runat="server" Width="124px" DataSourceID="SqlDataSource1" DataTextField="Name" DataValueField="Name" Height="20px">
</asp:DropDownList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CRS_SQLConnectionString%>"
SelectCommand="Load_Countries" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
I just basically want to use the CascadingDropDown control as it has a vertical scrollbar, that is the only reason. I don't need the control to be Ajax-enabled.
The above example in my first post is what I want except I don't want my CascadingDropDown to react to a DropDownList control, I want it to be bound directly to a stored procedure.
Edit:I am now thinking it would be easier to populate the CascadingDropDown from an xml file rather than a database table? Is this possible?
Hi Fonzi,
Based on your description, I think you should better use DropDownExtender instead of CascadingDropDown. CascadingDropDown is used to do cascading tasks. Here is the sample for DropDownExtender. You can do some modifications based on it.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .DropDownList { border-bottom:dotted 1px #006699; cursor:pointer; color:Maroon } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="TextLabel" runat="server" Text="Select your favorite exotic ice-cream flavor" Style="display: block; width: 300px; padding: 2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" /> <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display: none; visibility: hidden; height:40px; width:120px;overflow:auto;"> <li class="DropDownList">11111</li> <li class="DropDownList">11111</li> <li class="DropDownList">11111</li> <li class="DropDownList">11111</li> <li class="DropDownList">11111</li> <li class="DropDownList">11111</li> </asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" BehaviorID="DDEBID" TargetControlID="TextLabel" DropDownControlID="DropPanel" /> </form></body></html>Best regards,
Jonathan
Jonathon, I actually fixed it by using a third party control from a company called Telerik. It has a combo box with a drop down menu that has a vertical scrollbar.
The height of the scrollbar can be adjusted.
I still can't believe this is not possible with the combo box control in ASP.NET
Hi Fonzi,
I have spent serval hours to find out a solution. But unfortunately I was failed to get a better one. Also I had a glance of the Telerik DropDownList, based on my experience, I think they use Div or similar. Generally, we can do most effect that you want by using DIV + CSS. You can find tons of samples online.
I hope this help.
Best regards,
Jonathan
Jonathan Shen – MSFT:
Hi Fonzi,
I have spent serval hours to find out a solution. But unfortunately I was failed to get a better one. Also I had a glance of the Telerik DropDownList, based on my experience, I think they use Div or similar. Generally, we can do most effect that you want by using DIV + CSS. You can find tons of samples online.
I hope this help.
Best regards,
Jonathan
Heh, tell me about it! The Telerik control works fine. I haven't put it up online yet but here's what it looks like:
Hi Fonzi,
Here is the working sample you that you can reference.
<script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><style type="text/css">.divMain{ border-style:solid; border-width:1px; border-color:#CCCCCC; position:absolute; left:72px; top:36px; width:157px; height:25px; z-index:1; overflow: visible;}.divText{ border-style:none; border-width:1px; border-color:#CCCCCC; position:absolute; left:76px; top:39px; width:125px; height:15px; z-index:2; font-size:x-small; font-family:Tahoma; color:#0000FF;}.content{ border-style:solid; border-width:1px; border-color:#CCCCCC; position:absolute; left:72px; top:60px; width:157px; height:35px; z-index:3; overflow:auto; visibility: hidden;}.spanCss{ width:100%; color:#666666; font-family:Tahoma; font-size:x-small; cursor:hand;}.button{ BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 5px; padding-top:2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 10pt; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; BORDER-BOTTOM: #7b9ebd 1px solid}</style><body><div id="divMain" class="divMain"></div><div id="divText" class="divText"></div> <div id="content" class="content" onClick="onClickContent('content')" > </div><div id="button" onClick="onClickBtn('content')" style="border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;cursor:hand;position:absolute; left:207px; top:36px; width:15; height:25px; z-index:4;"><img src="arrow1.jpg" width="15" height="15" hspace="3" vspace="5"></div><div id="Layer1" style="position:absolute; left:285px; top:37px; width:292px; height:103px; z-index:5"> <form name="form1" method="post" action=""> <input class="button" name="button" type="button" id="button" value="Add New Item" onClick="addItem()"> <input type="text" id="textfield" name="textfield" value=""> </form></div><script language="javascript">var flag;flag=false;function onSelected(obj){ document.getElementById('divText').innerText=obj.innerText;}function onClickBtn(obj){ if (flag==false) { document.getElementById(obj).style.visibility="visible"; flag=true; } else { document.getElementById(obj).style.visibility="hidden"; flag=false; }}function onClickContent(obj){ document.getElementById(obj).style.visibility="hidden"; flag=false;}function hiddenDiv(){ if (flag==true) document.getElementById('content').style.visibility="hidden";}function changeColor(obj){obj.style.backgroundColor="#ccc";}function changeColorBack(obj){obj.style.backgroundColor="";}function addItem(){ if (document.getElementById('textfield').value=="") { alert("input data first!"); return ; } var str; var value; value=document.getElementById('textfield').value; str="<span onClick='onSelected(this)' "; str+="class='spanCss'"; str+="onMouseMove='changeColor(this)' onMouseOut='changeColorBack(this)'>"+value+"</span>";// alert(str); document.getElementById('content').innerHTML+=str;}//document.onclick=hiddenDiv;</script></body> I hope this help.
Best regards,
Jonathan
