Rad Editor Autofocuses to a Read-Only Element

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    10 posts
    Member since:
    Jun 2014

    Posted 06 Aug 2014 Link to this post

    I am using the Rad Editor tool in a web application. The editor is used to automatically load basic HTML templated forms to be filled out. The problem I am having is when I click inside the editor, on a read-only element (i.e. a table data like <td contenteditable="false" unselectable="ON">Example</td>) anywhere within the form, the cursor focuses to the start of the first read-only element. Also, I am able to edit the read-only. However, if I click in the editor box elsewhere (not on a read-only element), the cursor is placed in the cell that I click. Is there a way to set the cursor focus to the first editable cell if a read-only element is clicked on?

    Thanks in advance 
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Aug 2014 Link to this post

    Hi Patrick,

    You can try using the selectElement() method to select another element. Such logic can be implemented using the OnClientSelectionChange event to propgramatically invoke custom logic when user changes the selection.

    You can examine this sample demo for such implementation:
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange">
        <Content>
            <table>
                <tr>
                    <td contenteditable="false" unselectable="ON">Example</td>
                    <td contenteditable="false" unselectable="ON">Example</td>
                    <td> </td>
                </tr>
                <tr>
                    <td contenteditable="false" unselectable="ON">Example</td>
                    <td> </td>
                    <td contenteditable="false" unselectable="ON">Example</td>
                </tr>
                <tr>
                    <td contenteditable="false" unselectable="ON">Example</td>
                    <td> </td>
                </tr>
            </table>
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientSelectionChange(editor, args) {
            var $ = $telerik.$,
                contentArea = $(editor.get_contentArea()),
                selectedElement = $(editor.getSelectedElement());
     
            if (selectedElement.is("[contenteditable='false']")) {
                var toBeSelected = findNextPossibleElement(selectedElement);
     
                if (toBeSelected[0]) {
                    editor.selectElement(toBeSelected[0]);
                } else {
                    var firstPossible = contentArea.find("*").not("[contenteditable='false']");
                    editor.selectElement(firstPossible[0]);
                }
            }
        }
     
        function findNextPossibleElement(elm) {
            var next = elm.next();
     
            while (next && next.is("[contenteditable='false']")) {
                next = next.next();
            }
     
            return next;
        }
    </script>

    Note that this is a demo, further requirements should be built according the application.

    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.

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