How to add a ContextMenu item dynamically

4 posts, 0 answers
  1. Big Q
    Big Q avatar
    30 posts
    Member since:
    Jan 2010

    Posted 16 Feb 2011 Link to this post

    Hello telerik team,
    I want to implement such a function: When right click different element , add different contextmenu item to the bottom of original menu items and can fire some costomer method when clicking it.

    For Example:
    Now, I have two elements, the one is <input type='text'> , another is <input type='radio'> ,  when right click the first one, add a menu item called "Edit textbox" to the contextmenu, when click it, run the customer function "OpenTextEditWindow",  and the second one is similar with the first one. How should I do?

    I am looking forward to your reply

                                                                                                                                                                                alexzchen
  2. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 18 Feb 2011 Link to this post

    Hi Big Q,

    You can create your own custom context menu using the oncontextmenu event of RadEditor:

    <script type="text/javascript">  
    function CallContextMenu(editor)   
    {   
        editor.attachEventHandler ("oncontextmenu", function (e)   
        {     
            var oSelection = editor.getSelectedElement();  
            if(oSelection.tagName == "IMG"
            
                if (oSelection.getAttribute("custom") == "custom"
                
                    alert("the selected element className is " + oSelection.className); 
                    alert("the 'e' argument returns the mouse position " + e);  
                    alert("get a reference to the editor's body " + editor.get_document().body);  
                    alert("the selected element is " + oSelection.tagName);  
                    $telerik.cancelRawEvent(e);  
                    return false; //disable the browser's context menu     
                
            
        });  
    }   
    </script>  
        
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="CallContextMenu">  
      <Content> 
        <img src="test.jpg" custom="custom" class=".customImage"/> 
      </Content> 
    </telerik:RadEditor> 


    Kind regards,
    Rumen
    the Telerik team
  3. Big Q
    Big Q avatar
    30 posts
    Member since:
    Jan 2010

    Posted 18 Feb 2011 Link to this post

    Hi Telerik Team,
    Thanks very much for your reply. your code helps a lot, but it seems the action is different from what i want, when right click special custom control,I want a new RadContextMenu item can be added to the original menu and shown to user, and then click the new added menu item, it can fire some function. please see my sample attach image.

    By the way,refer to the code you give me, should I have to add a extra context menu control to page, and show it with the argument "e" to determine the position?
  4. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 23 Feb 2011 Link to this post

    Hi Big Q,

    I believe that the following code library could be helpful for your scenario: Changing context menu programmatically client-side.

    Greetings,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top