RadContextMenu contextMenu.show is not a function

[George]

A very very strange problem. I have RadContextMenu that are identical working on two page, but failing on another page. It was working fine and then just stopped giving a "contextMenu.show is not a function" error in javascript. 

Here is the code

<p>
    Touch the <asp:Button  OnClientClick="javascript:HelpExplainSelected(event)" runat="server" CssClass='EditP' UseSubmitBehavior="False"/> buttons to access menus for creating form fields.
</p>

 

I add RadCodeBlock on the suggestion of another post with a similar problem

<telerik:RadCodeBlock ID="RadCodeBlockMenu" runat="server">
<script type="text/javascript">
    function HelpExplainSelected(event) {
        var contextMenu = document.getElementById("<%= HelpExplainMenu.ClientID %>");
        contextMenu.show(event);
    }

 

<telerik:RadContextMenu ID="HelpExplainMenu" CssClass="RadContextMenu1" runat="server">
    <ExpandAnimation Type="None" Duration="0" />
    <CollapseAnimation Type="None" Duration="0" />
    <DataBindings>
        <telerik:RadMenuItemBinding   />
    </DataBindings>
    <Items>
        <telerik:RadMenuItem Text="Edit the Properties"  PostBack="False" ></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Add a Form Row for some Type" PostBack="False" ></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Insert a Form Row of Another Type"  PostBack="False" ></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Remove the Form Row"  PostBack="False" ></telerik:RadMenuItem>
   </Items>
</telerik:RadContextMenu>

 

This exact code works fine on two pages but on the third page, gives the function show() an error on contextMenu.show(event) that show is not found.

I tried re-starting Visual Studio, rebooting the computer. Solutions that have fixed other flaky Telerik problems.  I stare endlessly the code in the working and not working page, but it the same, except for the RadCodeBlock.

In the HTML generated for the menu (in all three pages),

<div tabindex="0" id="ctl00_MainContent_HelpExplainMenu">
    <div class="RadMenu RadMenu_MetroTouch RadMenu_Context RadMenu_MetroTouch_Context    RadContextMenu1">
        <ul class="rmActive rmVertical rmGroup rmLevel1">
            <li class="rmItem rmFirst"><a class="rmLink" href="#"><span class="rmText">Edit the Properties</span></a></li><li class="rmItem "><a class="rmLink" href="#"><span class="rmText">Add a Form Row for some Type</span></a></li><li class="rmItem "><a class="rmLink" href="#"><span class="rmText">Insert a Form Row of Another Type</span></a></li><li class="rmItem rmLast"><a class="rmLink" href="#"><span class="rmText">Remove the Form Row</span></a></li>
        </ul>
    </div><input id="ctl00_MainContent_HelpExplainMenu_ClientState" name="ctl00_MainContent_HelpExplainMenu_ClientState" type="hidden" />
</div>

 

HelpExplainMenu is a div.  How does the div object get a Show function?  What plumbing can be broken? Ideas on how to debug it? Every example I can find uses EventArgs with eventArgs.get_domEvent(); to get the event, could this be an issue?  If so how should a anchor supposed to open a RadContextMenu.

It was working and died with no apparent reason, will the other pages die in time too? Programming is not supposed to be like this.

Please do not ask for a project with the problem, off course it will not be possible since it does work fine elsewhere.

Please suggest how to debug this.

[George]

Investigating further, I used Google development to look at the contextMenu.

In the working page context menu is:

b.RadContextMenu {__msdisposeindex: 19, _element: div#ctl00_MainContent_HelpExplainMenu, _clientStateFieldID: "ctl00_MainContent_HelpExplainMenu_ClientState", _renderMode: 1, _shouldUpdateClientState: true, …}

 

In the non-working page, context menu is

<div tabindex="0" id="ctl00_MainContent_HelpExplainMenu">
    <div class="RadMenu RadMenu_MetroTouch RadMenu_Context RadMenu_MetroTouch_Context    RadContextMenu1"> ...

It is not b.RadContextMenu, like in the other pages.

How could this happen? What makes the div a RadContextMenu?

George

[George]

I found suggesting OnClientLoad, it almost works.

The menu definition adds an OnClientLoad reference to a JavaScript function.

<telerik:RadContextMenu ID="HelpExplainMenu" CssClass="RadContextMenu1" runat="server" OnClientLoad="loadHelpExplainMenu">

The JavaScript function save the the menu to a variable.

<script type="text/javascript">
    var menuHelpExplain;
    function loadHelpExplainMenu(sender, e) {
        menuHelpExplain = sender;
    }
</script>

 

The JavaScript callback from the anchor OnClick uses the variable for the menu.  It also calls cancelRawEvent for some reason.

function HelpExplainSelected(event) {
    var contextMenu = menuHelpExplain;
    cm = contextMenu;

    if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {
        contextMenu.show(event);
    }
    $telerik.cancelRawEvent(event);
    return false;
}

 

The menu comes up but immediately disappears. It is useless, it not even up long enough to see the menu items. 

New problem, using the OnClientLoad reference, how do I get the context menu to stay up until it clicked on?

Of course, solve the other problem would be better - why is contextMenu a div?

[George]

I emptied the asp of code and content so that on the code shown in the post exists.  The page has one line with a button, anchor that calls  OnClientClick="javascript:HelpExplainSelected(event)".

No change, contextMenu.show(event) says show does not exist. ContextMenu is a div, not a RadContextMenu.

I am completely flumixed. 

[Doncho]

Hi George,

You need to get a reference to the Client-side Control object by following the instructions in the Get Client-side Reference to a Control Object article. Then you will be able to call the built-in client functions like show() or showAt()

In order for the Controls to be visualized with all the related content and styles, they are creating an HTML structure of elements, which is rendered by the browser. For the ContextMenu it looks like in the screenshot below:

In general, most of the Telerik ASP.NET AJAX Controls, although being server components, are exposing client-side JavaScript Objects which provide client-side functionality.

Once you reference the Control on the Client you can use its built-in functionalities exposed by the Client API of the control. Check out RadContextMenu Object. and the client-side API of the RadMenu here: Telerik.Web.UI.RadMenu

You may find useful to check the Improve Your Debugging Skills with Chrome DevTools blog post. It will help in the process of inspecting the rendered HMTL and debugging.

I hope that will help you have a better overview. Please let me know if you have any questions.

Kind regards,
Doncho
Progress Telerik

[George]

Not the problem at all.

I created a new page and reduced it to only the message with an anchor calling it; it still happened. I Googled, finding that the code on the Telerik site always uses $find() instead of document.getElementById(). I tried $find(), and it worked; $find() returned a b.RadContextMenu instead of a div. It surprises me that the $find() would work differently than document.getElementById(). 

It concerns me that Telerik depends on the jquery command $find() returning a different value than the document.getElementById() command. Any time I update to a new version of jQuery, all my RadContextMenu windows could suddenly fail to launch, with no solution but going backward. Do I even notice before I update and mess up my customers. Of course fixing it happens once the problem is figured out, assuming you guys could help (which you did not this time, you don't know about $find()).  You should have a $TelerikFind() command, that only needs to call $find() now, and can be changed when jQuery changes $find() one day.

In my previous code, OnClientClick="javascript:OpenWindow(event)" needs to add return false; in order to work; OnClientClick="javascript:OpenWindow(event); return false;".

[Doncho]

Hi George,

I understand your concerns and I will try to dispel them.

Some of the Telerik Controls are using jQuery and therefore it comes as built-in and loaded automatically, see Telerik UI Controls Using jQuery. The jQuery object used with the controls is available as '$telerik.$' instead of the default '$' or 'jQuery' aliases. This is so to avoid compatibility issues with applications that already use (other versions of)jQuery.

In the Using jQuery article, you can find how to Include external jQuery, how to enable the frequently used '$' alias, and more specifics about using jQuery in Pages with Telerik Controls.

The document.getElementById() function, similar to the jQuery function .get() returns an HTML (DOM) element. If the referenced HTML element is a wrapper of a Client-side Control object, a reference to the object itself can be gotten using the control property of the DOM element, see Using Plain JavaScript Methods. On the other hand, by default .find() returns a jQuery object.

I hope this will give you a better overview.

Kind regards,
Doncho
Progress Telerik