iOS issues

6 posts, 0 answers
  1. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 05 May 2014 Link to this post

    1. I noticed the OnClientSelectionChange function is only called the first time you tap in the content area on iOS.  Subsequent taps do not cause the OnClientSelectionChange function to execute.

    2. I noticed a second issue when ContentAreaMode=iFrame. Subsequent taps do not move the cursor to the tap position unless I tap and hold the position. If I just tap, the iOS "Select | Select All | Paste" menu pops up and the cursor remains in the current position.  I see the same behavior in Safari and Chrome. iOS version 7.1.

    I'm using version 2014.1.403.45 of the editor.

    Please advise.

    Trevor.
  2. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 07 May 2014 Link to this post

    These are major issues for our customers. Can I please get some assistance in resolving them?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 08 May 2014 Link to this post

    Hi Trevor,

    On my end I am unable to reproduce the described issue. The selection change event is raised every time as expected using the following markup in a simple project:
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange">
        <Content>
            some text
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientSelectionChange(editor, args) {
            alert("Selection Change");
        }
    </script>

    About the iOS menu, note that it is a native browser feature and due to the complexity of the mobile device events I am unable to provide a possible approach to disable it and cancel its appearance.

    I suggest contacting us via proper support ticket and providing more details and configuration samples, so that we could further investigate and assist you about the certain scenarios under iOS mobile devices.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 08 May 2014 in reply to Ianko Link to this post

    I have spent time to prepare two sample projects to demonstrate the two separate issues:

    Issue 1: iOS. OnClientSelectionChange only fires the first time you tap in the content area. Subsequent taps do not fire. ContentAreaMode=Div.

    ASPX:

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <html>
    <body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <h2>OnClientSelectionChange only fires when first tapping into the content area</h2>
    <h2>iOS - ContentAreaMode=Div - editor version 2014.1.403.45</h2>
    <b>tap in the content area, then tap other spots in the content area</b>
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange" ContentAreaMode="Div">
        <Content>
            <p>this is line one</p>
            <p>this is line two</p>
            <p>this is line three</p>
            <p>this is line four</p>
        </Content>
    </telerik:RadEditor>
    <div id="divMessage"></div>
    </form>
    <script type="text/javascript">
        function OnClientSelectionChange(editor, args) {
            document.getElementById('divMessage').innerHTML+='selection change...';
            alert('selection change');
        }
    </script>
    </body>
    </html>


    Issue 2: iOS. Tapping in the content area does not move the cursor. ContentAreaMode=iFrame.

    ASPX:

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <html>
    <body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <h2>Cursor does not move on iOS - ContentAreaMode=iFrame</h2>
    <h2>editor version 2014.1.403.45</h2>
    <b>tap in the content area, then tap other spots within the content area</b>
    <telerik:RadEditor runat="server" ID="RadEditor1" >
        <Content>
            <p>this is line one</p>
            <p>this is line two</p>
            <p>this is line three</p>
            <p>this is line four</p>
        </Content>
    </telerik:RadEditor>
    <div id="divMessage"></div>
    </form>
    </body>
    </html>


    Again, these are critical issues.  Please provide a solution. Thanks,

    Trevor.

  6. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 09 May 2014 in reply to Trevor Link to this post

    UPDATE:

    further investigation into issue 2 shows that the content above the editor (in this case, the H2 and B elements) has some effect on this issue.  If I remove those elements above the editor, there is a noticeable difference in how the editor responds to taps. It still does not respond correctly, but it responds differently.

    Again, please provide a solution to this problem. Thanks.
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 May 2014 Link to this post

    Hello Trevor,

    Thank you for getting back to me with the provided samples.

    When the div mode is set the RadEditor is placing a simple content editable div element. Its event raise matter is entirely controlled by the browser and it appears that under  mobile devices there are some complications.

    When a simple JS onclick event is attached to such HTML element, you can see that the same result appears. After the first raise, no additional click handler is invoked.

    Example:
    <div contenteditable="true" style="width:600px; height:400px; border:1px solid red;" onclick="alert('click')">
        <p>this is line one</p>
        <p>this is line two</p>
        <p>this is line three</p>
        <p>this is line four</p>
    </div>


    Due to that I am unable to confirm that this is a bug of the RadEditor. By this investigation I can determine that this is a browser behavior, although I will log this for further investigation by our dev team. Due to the complexity of this matter I am unable to provide a possible resolution for this.


    The second issue, as mentioned in my first message stems due to the native events of the editable iFrame, which cannot be bypassed easily. After some further researching I found that the best way to replace the cursor position is by holding the tap. It appears that under iOS touch devices the cursor in native editable elements can be easily located by holding and sliding to the desired location.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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