Rad Editor Autofocuses to a Read-Only Element

[Patrick]

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 

[Ianko]

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