This is a migrated thread and some comments may be shown as answers.

[Solved] EnableDragAndDrop + AllowTransfer + Firefox + ItemTemplate Problem

8 Answers 173 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

HSLaw asked on 28 Sep 2010, 03:27 AM

In Firefox, when I try to click on the radnumerictextbox,
I cannot edit the text because the item is "selected" when I Single click on the text box.
The problem seems to appear if I EnableDragAndDrop.

URL: http://www.ximnet.com.my/telerik/test_listbox.aspx
Video Demo: http://www.ximnet.com.my/telerik/listbox_firefox_drag_drop_textbox.swf

Is there anything I can do to prevent this?

ASPX Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_listbox.aspx.vb" Inherits="test_listbox" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server"><telerik:RadScriptManager ID="RSM" runat="server" />

<telerik:RadListBox ID="RadListBox1" runat="server" AllowTransfer="true" EnableDragAndDrop="true" AutoPostBackOnTransfer="true"

Height="200px" SelectionMode="Multiple" OnTransferred="RadListBox1_Transferred"

TransferToID="RadListBox2" Width="215px">

<ButtonSettings ShowTransferAll="false" VerticalAlign="Middle" />

<ItemTemplate>

<span class="product-title">

<%# DataBinder.Eval(Container, "Text")%></span> <span class="bearing">1 bearing</span>

</ItemTemplate>

<Items>

<telerik:RadListBoxItem Text="Spinning Reel 1" Value="reel1_thumb.png" Price="99" Selected="true" />

<telerik:RadListBoxItem Text="Spinning Reel 2" Value="reel2_thumb.png" Price="199" />

<telerik:RadListBoxItem Text="Spinning Reel 3" Value="reel3_thumb.png" Price="99" />

<telerik:RadListBoxItem Text="Spinning Reel 4" Value="reel4_thumb.png" Price="299" />

<telerik:RadListBoxItem Text="Spinning Reel 5" Value="reel5_thumb.png" Price="199" />

<telerik:RadListBoxItem Text="Spinning Reel 6" Value="reel6_thumb.png" Price="99" />

<telerik:RadListBoxItem Text="Spinning Reel 7" Value="reel7_thumb.png" Price="299" />

<telerik:RadListBoxItem Text="Spinning Reel 8" Value="reel8_thumb.png" Price="199" />

</Items>

</telerik:RadListBox>

<telerik:RadListBox runat="server" EnableDragAndDrop="true" ID="RadListBox2" Height="200px" Width="270px"

SelectionMode="Multiple">

<ItemTemplate>

<span class="detail-title">

<%# DataBinder.Eval(Container, "Text")%></span>

<ul class="details">

<li>

<label>

Price:</label>

<span>

<%# Convert.ToInt32(DataBinder.Eval(Container, "Attributes['Price']")).ToString("C0") %></span>

</li>

<li>

<label>

Quantity:</label>

<telerik:RadNumericTextBox runat="server" ID="QuantityTextBox" Width="40px" MinValue="1"

MaxValue="10" ShowSpinButtons="true" Value="1" NumberFormat-DecimalDigits="0" />

</li>

</ul>

</ItemTemplate>

<Items>

<telerik:RadListBoxItem Text="Spinning Reel 9" Value="reel9.png" Price="99" />

</Items>

</telerik:RadListBox>

</form>

</body>

</html>

VB Code:

Imports Telerik.Web.UI

Partial Class test_listbox

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

RadListBox1.DataBind()

RadListBox2.DataBind()

End If

End Sub

Protected Sub RadListBox1_Transferred(ByVal sender As Object, ByVal e As RadListBoxTransferredEventArgs)

For Each item As RadListBoxItem In e.Items

'Update the image

If e.SourceListBox Is RadListBox1 Then

item.Value = item.Value.Replace("_thumb", "")

Else

item.Value = item.Value.Replace(".png", "_thumb.png")

End If

'Databind the item in order to evaluate the databinding expressions from the template

item.DataBind()

Next

End Sub

End Class

8 Answers, 1 is accepted

answered on 30 Sep 2010, 04:03 PM

Hello HSLaw,

You are right, the problem seems to be related to DragAndDrop. Hopefully, I've come with the following workaround:

<script type="text/javascript">

Sys.Application.add_load(function() {

var listBox = $find("RadListBox2");

var $ = $telerik.$;

$(".riTextBox", listBox.get_element())

.live("click", function(e) {

listBox.set_enableDragAndDrop(false);

});

$(".rlbItem", listBox.get_element())

.live("click", function(e) {

listBox.set_enableDragAndDrop(true);

});

</script>

The idea here is to disable the drag and drop when one click on the spin text box and enable it once again as one try to drag the item. I've tested it on a sample project and it seems to work fine.

Best wishes,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Sep 2011, 07:04 AM

Hello Helen!

I have almost the same scenario HSLaw described: ItemTemplate (with a RadTextBox) + EnableDragAndDrop + AllowTransfer.

The problem is that I cannot get the focus on the RadTextBox as it immediatly starts to drag the item (not only in Firefox, but also IE, Opera and Chrome)

I've tried the code Genady posted, but I get listbox is null in $(".riTextBox", listBox.get_element()).

Any thing else that can be done in order to get the cursor inside the RadTextBox in an RadListBox item template?
I temporarily set EnableDragAndDrop="false".

Thanks in advance for your support!

Best regards,

Ricardo Pinto.

Ps: HSLaw, did you ever managed to solve this issue?

answered on 29 Sep 2011, 11:53 AM

Hello Genady!

Thanks for your reply :)

Using the find method with the embedded server code I no longer have the javascript error (which means my rlbFormItems listbox was found).

However the drag and drop activation issue is not solved.
When I click on the listbox item area there is no problem, and the same happens if I click a RadEditor or CheckboxList I have inside my ItemTemplate. But when I click on the RadTextBox or RadNumericTextBox, the drag & drop is activated and I cannot edit the content.

The only way I can write on these controls is using the rightclick (which opens the browser context menu), followed by left click on the control.

Is there anything else I can try to avoid this issue?

Thanks again!
Best regards,

Ricardo Pinto.

answered on 05 Oct 2011, 09:50 AM

Hello,

After some debugging I've come up with the following workaround:

<script type="text/javascript">

var mouseMoveHandler;

Sys.Application.add_load(function() {

var listBox = $find("RadListBox1");

var $ = $telerik.$;

mouseMoveHandler = listBox._onDocumentMouseMove;

$(".riTextBox", listBox.get_element())

.bind("click", function(e) {

$(e.target).focus();

e.preventDefault();

listBox._onDocumentMouseMove = function() {};

return false;

});

$(".rlbItem", listBox.get_element())

.bind("mousedown", function(e) {

listBox._onDocumentMouseMove = mouseMoveHandler;

});

</script>

<div>

<telerik:RadListBox runat="server" ID="RadListBox1" EnableDragAndDrop="true">

<ItemTemplate>

<telerik:RadTextBox runat="server">

</telerik:RadTextBox>

<asp:Label Text="FOo" runat="server"></asp:Label>

</ItemTemplate>

<Items>

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />

</Items>

</telerik:RadListBox>

<telerik:RadListBox ID="RadListBox2" runat="server">

</telerik:RadListBox>

</div>

All the best,
Genady Sergeev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now