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

Rad Editor Autofocuses to a Read-Only Element

1 Answer 11 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 06 Aug 2014, 01:40 PM
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 

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 11 Aug 2014, 10:57 AM
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.

 
Tags
Editor
Asked by
Patrick
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or