The context menu closes itself after shown when you call getContextMenuByTagName method

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 29 Jun 2022 09:45 by ADMIN

Liyuan

Created on: 26 May 2022 09:01

Category: Editor

Type: Bug Report

The context menu closes itself after shown when you call getContextMenuByTagName method

The execution of the getContextMenuByTagName inside the oncontextmenu event of RadEditor hides the context menu once it is shown. This happens in Lightweight render mode only and when the UseRadContextMenu is enabled:

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="iframe" OnClientLoad="OnClientLoad">
    <Content>
        <table>
            <tr>
                <td>test</td>
            </tr>
                <tr>
                <td>test</td>
            </tr>
                <tr>
                <td>test</td>
            </tr>
        </table>
    </Content>
</telerik:RadEditor>
<script>
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("oncontextmenu", function (e) {
            var oSelection = editor.getSelectedElement();

            setTimeout(function () {
                var tdMenu = editor.getContextMenuByTagName("TD"); //the call of getContextMenuByTagName closes the context menu when lightweight render mode is used. You can slow down the closing with the setTimeout function or by settign UseRadContextMenu to false.

            }, 1000);
        });

    }
</script>

1 comment

ADMIN

Rumen

Posted on: 29 Jun 2022 09:44

The solution is to call the showContextMenu function after the call of the getContextMenuByTagName method, e.g

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="iframe" OnClientLoad="OnClientLoad">
    <Content>
        <table>
            <tr>
                <td>test</td>
            </tr>
                <tr>
                <td>test</td>
            </tr>
                <tr>
                <td>test</td>
            </tr>
        </table>
        <br/><img src="images/home.png" />
    </Content>
</telerik:RadEditor>
<script>
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("oncontextmenu", function (e) {

            var tdMenu = editor.getContextMenuByTagName("TD");
            //do your work here
            //code
            //code
            //code

            //at the end of your code put this code to reopen the menu
            var positioningData = {
                contentAreaMode: editor.get_contentAreaMode(),
                docNode: document.documentElement || document,
                editorContentAreaElement: editor.get_contentAreaElement()
            };
            var element = editor.get_toolAdapter()._getContextElement(e);
            var elemName = element.tagName;
            var contextMenu = editor.get_toolAdapter()._contextMenuFunctionality.getContextMenuByTagName(elemName);
            if (contextMenu != null) editor.get_toolAdapter()._contextMenuFunctionality.showContextMenu(contextMenu, e, positioningData);
        });
    }
</script>