Javascript Problem

[Peter]

Working in IE 8, mostly, but trying to write a portable solution for modern browsers.

I'm catching the 'Showing' client-side event of the RadContextMenu and trying to adjust it's coordinates. The clientX, clientY and x,y members of the DOM event cannot be assigned a new value. Visual Studio breaks with a "htmlfile: Member not found" error.

My goal is to get a RadContextMenu to show inside a RadEditor when the user clicks in it (under certain conditions, this is a requirement from management). So I capture the onclick event for the RadEditor's content area (radEditor.get_document().body;). I then call show(evt) on the context menu, where 'evt' is the event object corresponding to the click event.

Because the RadEditor's content is in an IFRAME, you have to adjust the position of the click event before the context menu displays. This is done in the "Showing" event. However, I cannot assign a value to the members .clientX and friends. It's as if javascript has temporarily forgotten about integer + and += operators.

Is it possible that these members have become readonly/const at some point?

window.onload = function() {
    //details is the radeditor

    setTimeout(function() {
        var node = $find(details).get_document().body;
        if (node.attachEvent)
            node.attachEvent("onclick", reDetails_InsideClick);
        else
            node.addEventListener("click", reDetails_InsideClick, false);
    }, 250);

}

function reDetails_InsideClick(e) {
    e = e || event;

    var btnContext = $find(toolbarBottom).findItemByValue("Context");
    if (btnContext.get_checked()) { //Trivial application logic.
        var rcm = $find(atcmContext); //atcmContext is the context menu
        if(!e.target)
            e.target = e.srcElement; //For some reason e.target is undefined here
        rcm.show(e);
    }
}

function rcmAutoText_Showing(sender, args) {
    var node = /*get the editor's IFRAME element*/
    var evt = args.get_domEvent();

    while (node) {
        evt.offsetX += node.offsetLeft; //Crashes Here: 'Member not found.'
        evt.offsetY += node.offsetTop;
        node = node.offsetParent;
    }
    evt.clientY += sender.get_element().clientHeight;
}

[Peter]

Hi Peter,

We recommend you use the following approach:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">
      function OnClientLoad(editor, args)
      {
        var element = document.all ? editor.get_contentArea() : editor.get_document();
        $telerik.addExternalHandler(element, "click", function(e) {
        var menu = $find('<%=RadContextMenu1.ClientID%>');
        var iframe = $get(editor.get_id() + "Center");
        menu.showAt(e.x + iframe.offsetLeft, e.y + iframe.offsetTop);
        });
      }


    </script>
    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
    </telerik:RadEditor>
    <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>

Let us know how it goes.

Kind regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.