Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

EnableDragAndDrop + AllowTransfer + Firefox + ItemTemplate Problem

8 Answers 113 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
HSLaw
Top achievements
Rank 1
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">
 
<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

Sort by
0
Genady Sergeev
Telerik team
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
0
HSLaw
Top achievements
Rank 1
answered on 27 Nov 2010, 05:27 AM
Hi,

I tried the code in my page:
http://www.ximnet.com.my/telerik/test3.aspx

However, it doesn't seems to be able to find the listbox.
Am I missing out something?

Thanks.

0
Helen
Telerik team
answered on 02 Dec 2010, 03:20 PM
Hello,

Do you receive any error? What exact line of code is causing the problem?

Regards,
Helen
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Ricardo Pinto
Top achievements
Rank 1
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?
0
Genady Sergeev
Telerik team
answered on 29 Sep 2011, 09:42 AM
Hi Ricardo Pinto,

Please make sure that you are calling $find with correct ListBox ID. Example:

var listBox = $find('<%= RadListBox1.ClientID %>');

Please note that I am using RadListBox1 as id, in your scenario it is likely that the listbox is named otherwise.

Greetings,
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
0
Ricardo Pinto
Top achievements
Rank 1
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.

0
Genady Sergeev
Telerik team
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
0
Ricardo Pinto
Top achievements
Rank 1
answered on 06 Oct 2011, 12:10 AM
Hello Genady!

Thanks for your sample, it is working now :)

Best regards,

Ricardo.
Tags
ListBox
Asked by
HSLaw
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
HSLaw
Top achievements
Rank 1
Helen
Telerik team
Ricardo Pinto
Top achievements
Rank 1
Share this question
or