EnableDragAndDrop + AllowTransfer + Firefox + ItemTemplate Problem

9 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 27 Sep 2010 Link to this post

    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
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 30 Sep 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 26 Nov 2010 Link to this post

    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.

  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 02 Dec 2010 Link to this post

    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.
  6. Ricardo Pinto
    Ricardo Pinto avatar
    36 posts
    Member since:
    Sep 2008

    Posted 26 Sep 2011 Link to this post

    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?
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 29 Sep 2011 Link to this post

    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
  8. Ricardo Pinto
    Ricardo Pinto avatar
    36 posts
    Member since:
    Sep 2008

    Posted 29 Sep 2011 Link to this post

    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.

  9. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 05 Oct 2011 Link to this post

    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
  10. Ricardo Pinto
    Ricardo Pinto avatar
    36 posts
    Member since:
    Sep 2008

    Posted 05 Oct 2011 Link to this post

    Hello Genady!

    Thanks for your sample, it is working now :)

    Best regards,

    Ricardo.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017