I ran into this very question yesterday. Style DropDowns or Replace all with Comboboxes. Unfortunately sometimes Comboboxes are just overkill (if your only goal is to skin) Here are two examples that should do the same thing:
| 1 |
RADCOMBOBOX (PROMETHEUS): |
| 2 |
<TD style="WIDTH: 50px; HEIGHT: 21px">Combobox</TD> |
| 3 |
<TD style="WIDTH: 50px; HEIGHT: 21px"> |
| 4 |
<DIV class="RadComboBox RadComboBox_WebBlue " id=Search1_ddlComboboxFltr style="DISPLAY: inline; WIDTH: 45px; ZOOM: 1" value="<>"> |
| 5 |
<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" cellSpacing=0 cellPadding=0 border=0> |
| 6 |
<TBODY> |
| 7 |
<TR> |
| 8 |
<TD class="rcbInputCell rcbInputCellLeft" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px; WIDTH: 100%"> |
| 9 |
<INPUT class=rcbInput id=Search1_ddlComboboxFltr_Input style="DISPLAY: block" readOnly value="<>" name=Search1$ddlComboboxFltr_Input autocomplete="off"></INPUT> |
| 10 |
</TD> |
| 11 |
<TD class="rcbArrowCell rcbArrowCellRight" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px"> |
| 12 |
<A id=Search1_ddlComboboxFltr_Arrow style="DISPLAY: block; OVERFLOW: hidden; POSITION: relative; outline: none">select</A> |
| 13 |
</TD> |
| 14 |
</TR> |
| 15 |
</TBODY> |
| 16 |
</TABLE> |
| 17 |
<DIV class=rcbSlide style="Z-INDEX: 300"> |
| 18 |
<IFRAME style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" src="javascript:'';" frameBorder=0></IFRAME> |
| 19 |
<DIV class=RadComboBoxDropDown_WebBlue id=Search1_ddlComboboxFltr_DropDown style="DISPLAY: none; FLOAT: left"> |
| 20 |
<DIV class="rcbScroll rcbWidth" style="WIDTH: 100%"> |
| 21 |
<UL class=rcbList style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; ZOOM: 1; LIST-STYLE-TYPE: none; lmargin: 0"> |
| 22 |
<LI class="rcbItem "> |
| 23 |
<LI class="rcbItem ">= |
| 24 |
<LI class="rcbItem "><></LI> |
| 25 |
</UL> |
| 26 |
</DIV> |
| 27 |
</DIV> |
| 28 |
</DIV> |
| 29 |
<INPUT id=Search1_ddlComboboxFltr_ClientCombobox type=hidden value='{"logEntries":null,"value":"2","text":"<>","enabled":true}' name=Search1_ddlComboboxFltr_ClientCombobox> |
| 30 |
</DIV> |
| 31 |
</TD> |
| 1 |
ASP:DROPDOWNBOX: |
| 2 |
<TD style="WIDTH: 60px">DropDown</TD> |
| 3 |
<TD style="WIDTH: 50px"> |
| 4 |
<SELECT id=Search1_ddlDropDownFltr name=Search1$ddlDropDownFltr> |
| 5 |
<OPTION value=0 selected></OPTION> |
| 6 |
<OPTION value=1>=</OPTION> |
| 7 |
<OPTION value=2><></OPTION> |
| 8 |
</SELECT> |
| 9 |
</TD> |
These differences touch on several issues. I have a form which requires 2 load on demand comboboxes and 16 databound dropdowns. Replacing the 16 dropdowns with comboboxes takes the amount of code dropped to the client from @4,240 characters to @33,632. Scalability has a noticable impact on remote offices with slower connections.
For some reason, after assigning a datasource to the radcombobox, the DataTextField and DataValueField must be populated manually vs dropdowns with appropriate fields in the properties window. Also in this particular instance, when a user selects option with a text value of [less than/greater than] in the combobox, the &lt;&gt; shows up instead of the actual characters. This was not an issue with the dropdown list. Even stranger, the characters display properly after postback.
Point is, as awesome as the radcombobox is, there are situations where simplicity trumps functionality.