When a dropdown element is decorated, dragging of items causes incorrect selection.
The problem is due to browser behavior of the click event. When performing a dragging like action on plain list items the event target is the UL element instead the LI.
The following resolution will work only for dropdowns without multiple selection:
<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All"
DecorationZoneID="decorationZone" Skin="Silk"></telerik:RadFormDecorator>
<div id="decorationZone">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="135px" TabIndex="3">
<asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
<asp:ListItem Text="Drama" Value="2"></asp:ListItem>
<asp:ListItem Text="Romance" Value="3"></asp:ListItem>
<asp:ListItem Text="Religious" Value="4"></asp:ListItem>
<asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
<asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
<asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
</asp:DropDownList>
</div>
<script type="text/javascript">
Telerik.Web.UI.RadFormDecorator.prototype.decorateSelects = function (rootElement) {
var selects = rootElement.getElementsByTagName("select");
if (selects.length == 0 && rootElement.tagName && rootElement.tagName.toLowerCase() == "select")
selects = [rootElement];
for (var i = 0; i < selects.length; i++) {
this.decorateSelect(selects[i]);
}
if (selects.length > 0) {
if (!this._selectBodyClickDelegate) {
this._selectBodyClickDelegate = Function.createDelegate(this, this._selectBodyClickHandler);
if ($telerik.isTouchDevice) {
this._ensureThisDelegate("_selectScrollingDelegate", this._selectScrollingHandler);
$telerik.addHandler(document, "touchmove", this._selectScrollingDelegate);
}
$telerik.addHandler(document, ($telerik.isTouchDevice ? "touchend" : "mousedown"), this._selectBodyClickDelegate);
}
}
};
</script>