Completed
Last Updated: 06 Aug 2015 11:19 by ADMIN
ADMIN
Ianko
Created on: 11 Jul 2014 10:49
Category: UI for ASP.NET AJAX
Type: Bug Report
0
The selection is incorrect when Select Items are dragged in a decorated Select element under Chrome and IE
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>
0 comments