Changing context menu programmatically client-side?

17 posts, 1 answers
  1. David Balderree
    David Balderree avatar
    10 posts
    Member since:
    Apr 2007

    Posted 04 Dec 2007 Link to this post

    Hello,
    I'm using the prometheus editor to create mail merge files, and I've been trying to use img tags as placeholders for the merge fields.  My question is, is it possible to make the context menu items for this mergefield img tag (it would have an attribute marking it as a mergefield) different from those of a regular img tag?  Is it possible to access the object model for the context menu after the img is selected and before the menu pops so I can set the visibility of each menu item?  Any help would be greatly appreciated.
    Thanks,
    David
  2. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 07 Dec 2007 Link to this post

    Hi David,

    This is an interesting request, and we can come up with an example early next week which we will post here.

    Greetings,
    Tervel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 10 Dec 2007 Link to this post

    Hi David,

    We implemented a small example for you, however, in order for it to work we had to extend on short notice the client-side editor API a bit to allow access to the context menus.

    The current version of the editor will not work properly with this code, yet the RadControls Q3 release coming in a week will feature the new editor version.

    We hope that such a one-week delay is not critical for you. Once the Q3 release is out and if you need extra help with the example to fully cover your scenario, please let us know.

    JavaScript Code
    /***********************************************************************************************************************
    *
    *   Adding and controlling a custom context menu item
    *
    ************************************************************************************************************************/ 
    function OnClientLoad(editor)  
    {  
        var contextMenu = editor.getContextMenuByTagName("IMG");      
        if (!contextMenu) return;  
                          
        //Attach to the context menu show event, obtain editor selection and determine which tools to show  
        contextMenu.add_show(function()  
        {  
           //Must be an image, the context menu would not fire  
           var sel = editor.getSelectedElement();  
             
           //An array of menu item objects  
           var menuItems = contextMenu.get_items();  
             
           //The custom menu item  
           var customItem = menuItems[menuItems.length -1];  
     
           //Check for custom attribute  
           if (sel.getAttribute("mergefield"))  
           {  
                //Enable custom tool                          
                customItem.get_element().style.display = "";  
           }  
           else   
           {  
                //Hide custom tool  
                customItem.get_element().style.display = "none";              
           }  
        });          
    }  
     
     
    Telerik.Web.UI.Editor.CommandList.CustomImageDialog = function(editor, commandName, args)  
    {  
        alert(" Custom image manager called");  
    }; 


    [Sample] CSS for the Custom tool

    .CustomImageDialog  
    {  
        border:1px solid red;  


    Editor declaration

     
    <telerik:radeditor runat="server" ID="RadEditor1"             
    OnClientLoad = "OnClientLoad"                     
    Height="400px">    
      <ContextMenus> 
          <telerik:EditorContextMenu TagName="IMG">  
            <telerik:EditorTool Name="SetImageProperties"  /> 
            <telerik:EditorTool Name="ImageMapDialog" /> 
            <telerik:EditorTool Name="CustomImageDialog" Text="Custom Image Dialog" /> 
          </telerik:EditorContextMenu>              
      </ContextMenus> 
      <Content> 
        Custom image <img mergefield="yes" alt="product logo" src="../../Img/productLogo.gif" />                
        Plain image <img alt="product logo" src="../../Img/productLogo.gif" />                    
      </Content>                      
    </telerik:radeditor> 

    You will need to provide css styling for the tool yourself (e.g. use the background css attribute to specify an image)
    You will also need to implement the custom dialog that opens for the custom image (please see our online demo -
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/CustomDialogs/DefaultCS.aspx

    Regards,
    Tervel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. David Balderree
    David Balderree avatar
    10 posts
    Member since:
    Apr 2007

    Posted 10 Dec 2007 Link to this post

    Awesome!  This is exactly what I was looking for.  You guys are the best!
  6. David Balderree
    David Balderree avatar
    10 posts
    Member since:
    Apr 2007

    Posted 15 Apr 2009 Link to this post

    Hi guys,
    This seems to have stopped working right with the Q1 '09 release.  Whenever I bring up a context menu for the regular image it shows the empty space for the mailmerge menuitem.  When I bring up the context menu for a mailmerge image, the regular image menuitem (the first one) shows up but is empty.  Previously, it would only show the proper menuitem when you right click to bring up the context menu (I made just a trivial change to the code Tervel sent.)  Any ideas on how I can get this working again?

    Also, is it possible to specify an icon for the custom menuitem?

    Thanks!
    David
  7. Answer
    Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 16 Apr 2009 Link to this post

    Hi David,

    Please, try the following code with the latest Q1 SP1 2009 version of RadEditor for ASP.NET AJAX:

    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images"  /> 
        <Tools> 
            <telerik:EditorToolGroup> 
                <telerik:EditorTool Name="CustomImageDialog" /> 
            </telerik:EditorToolGroup> 
        </Tools> 
        <ContextMenus> 
            <telerik:EditorContextMenu TagName="IMG"
                <telerik:EditorTool Name="ImageMapDialog" /> 
                <telerik:EditorTool Name="CustomImageDialog" /> 
            </telerik:EditorContextMenu> 
        </ContextMenus> 
        <Content> 
            <img src="http://demos.telerik.com/aspnet-ajax/Common/Img/Icons/Editor.gif" mergefield="mergefield"/> 
            <br/><img src="http://demos.telerik.com/aspnet-ajax/Common/Img/Icons/Editor.gif" /> 
        </Content> 
    </telerik:RadEditor>   
    <script type="text/javascript"
    /***********************************************************************************************************************
    *
    *   Adding and controlling a custom context menu item
    *
    ************************************************************************************************************************/  
    function OnClientLoad(editor)   
    {   
        var contextMenu = editor.getContextMenuByTagName("IMG");       
        if (!contextMenu) return;   
                           
        //Attach to the context menu show event, obtain editor selection and determine which tools to show   
        contextMenu.add_show(function()   
        {   
           //Must be an image, the context menu would not fire   
           var sel = editor.getSelectedElement();   
              
           //An array of menu item objects   
           var menuItems = contextMenu.get_items();   
              
           //The custom menu item   
           var customItem = menuItems[menuItems.length -1];   
      
           //Check for custom attribute   
           if (sel.getAttribute("mergefield"))   
           {   
                //Enable custom tool   
                                      
                    customItem.get_element().style.display = "";   
                    customItem.get_element().parentNode.style.display = ""
           }   
           else    
           {   
                //Hide custom tool   
                customItem.get_element().style.display = "none";    
                customItem.get_element().parentNode.style.display = "none";       
           }      
        });           
    }   
      
      
    Telerik.Web.UI.Editor.CommandList.CustomImageDialog = function(editor, commandName, args)   
    {   
        alert(" Custom image manager called");   
    };  
    </script> 

    To set a custom image for the custom tool put the following css class on the page with RadEditor:

        <style type="text/css"
        .CustomImageDialog 
        { 
           background-imageurl(http://demos.telerik.com/aspnet/RadControls/Editor/Skins/Default/buttons/ImageManager.gif) !important; 
        } 
        </style>  

    For your convenience I have attached my test page.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. David Balderree
    David Balderree avatar
    10 posts
    Member since:
    Apr 2007

    Posted 16 Apr 2009 Link to this post

    Thanks Rumen, that worked perfectly!
    David
  9. Matti
    Matti avatar
    3 posts
    Member since:
    Aug 2008

    Posted 01 Mar 2010 Link to this post

    There is a bug with this code in Google Chrome.

    I am using Google Chrome 4.1.249.1017 beta (39874) and the code below is not returning the correct element, it is actually returning the last element I right-clicked.  Firefox and IE work fine.  Is this known?

    editor.getSelectedElement()

    Here is my js:

    function OnClientLoad(editor, args) 
        setupContextMenu(editor, "IMG"); 
        setupContextMenu(editor, "A");     
     
    function setupContextMenu(editor, tagname) { 
        var contextMenu = editor.getContextMenuByTagName(tagname);       
        if (!contextMenu) return;  
     
        //Attach to the context menu show event, obtain editor selection and determine which tools to show   
        contextMenu.add_show(function()   
        {   
           //Must be an image, the context menu would not fire   
           var sel = editor.getSelectedElement();   
            if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")  
            { 
                selsel = sel.parentNode; 
            } 
              
           //An array of menu item objects   
           var menuItems = contextMenu.get_items();   
              
           //The custom menu item   
           var customItem = menuItems[menuItems.length -1];   
      
           //Check for custom attribute   
           if (sel.getAttribute("social"))   
           {   
                //Enable custom tool                           
                customItem.get_element().style.display = "";   
                customItem.get_element().parentNode.style.display = ""
           }   
           else    
           {   
                //Hide custom tool   
                customItem.get_element().style.display = "none";     
                customItem.get_element().parentNode.style.display = "none";            
           }   
        });  

  10. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Mar 2010 Link to this post

    Hi Matti,

    RadEditor's content area is an editable IFRAME which uses browser's RichText Editing engine. Chrome and Safari do not support element selection on mouse click and that is the reason for the incorrect selection. RadEditor is handling the oncontextmenu event to provide ContextMenu functionality.

    Please try the following slightly modified code (modifications are marked with //added by Telerik comments) :
    function setupContextMenu(editor, tagname)
    {
        var contextMenu = editor.getContextMenuByTagName(tagname);
        if (!contextMenu) return;
         
        //Attach to the context menu show event, obtain editor selection and determine which tools to show
        contextMenu.add_show(function()
        {
            //added by Telerik
            //using setTimeout to ensure that the selected element is the correct one
            setTimeout(function()
            {
                //Must be an image, the context menu would not fire  
                var sel = editor.getSelectedElement();
                if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")
                {
                    selsel = sel.parentNode;
                }
     
                //An array of menu item objects  
                var menuItems = contextMenu.get_items();
     
                //The custom menu item
                var customItem = menuItems[menuItems.length - 1];
     
                //added by Telerik
                //get ContextMenuElement
                var contextMenuElement = $telerik.$("div.reDropDownBody")[0];
     
                //Check for custom attribute  
                if (sel.getAttribute("social"))
                {
                    //Enable custom tool                          
                    customItem.get_element().style.display = "";
                    customItem.get_element().parentNode.style.display = "";
                     
                    //added by Telerik
                    //set the correct height to the contextmenu wrapper
                    contextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
                }
                else
                {
                    //Hide custom tool  
                    customItem.get_element().style.display = "none";
                    customItem.get_element().parentNode.style.display = "none";
                     
                    //added by Telerik
                    //set the correct height to the contextmenu wrapper
                    contextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";
                }
            }, 0);
        });
    }        


    Sincerely yours,
    Dobromir
    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.
  11. Matti
    Matti avatar
    3 posts
    Member since:
    Aug 2008

    Posted 02 Mar 2010 Link to this post

    Dobromir,

    Thank you for your speedy reply.  This fixed the problem with chrome and safari.  There was one thing I found testing with IE, it was adding vertical scroll, but I just set overflow to hidden and works great now.  I've posted the final code below, thanks again for your help!

    function OnClientLoad(editor, args)  
    {  
        setupContextMenu(editor, "IMG");  
        setupContextMenu(editor, "A");      
    }  
     
    function setupContextMenu(editor, tagname) {  
        var contextMenu = editor.getContextMenuByTagName(tagname);        
        if (!contextMenu) return;   
     
        //Attach to the context menu show event, obtain editor selection and determine which tools to show    
        contextMenu.add_show(function()    
        {    
           setTimeout(function()  
            {  
                //Must be an image, the context menu would not fire    
               var sel = editor.getSelectedElement();    
                if (sel.tagName == "IMG" && sel.parentNode != null && sel.parentNode.tagName == "A")   
                {  
                    selsel = sel.parentNode;  
                }  
                   
               //An array of menu item objects    
               var menuItems = contextMenu.get_items();    
                   
               //The custom menu item    
               var customItem = menuItems[menuItems.length -1];   
     
                //get ContextMenuElement   
                var contextMenuElement = $telerik.$("div.reDropDownBody")[0];   
           
               //Check for custom attribute    
               if (sel.getAttribute("social"))    
               {    
                    //Enable custom tool                            
                    customItem.get_element().style.display = "";    
                    customItem.get_element().parentNode.style.display = "";  
     
                    //set the correct height to the contextmenu wrapper  
                    contextMenuElementcontextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";  
                    // Fix vertical scroll in IE  
                    contextMenuElement.style.overflow = 'hidden';  
               }    
               else     
               {    
                    //Hide custom tool    
                    customItem.get_element().style.display = "none";      
                    customItem.get_element().parentNode.style.display = "none";    
     
                    //set the correct height to the contextmenu wrapper  
                    contextMenuElementcontextMenuElement.style.height = contextMenuElement.firstChild.offsetHeight + "px";       
                    // Fix vertical scroll in IE  
                    contextMenuElement.style.overflow = 'hidden';      
               }   
            }, 0);  
        });   

    Thank you,

    Matti
  12. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Mar 2010 Link to this post

    Hi Matti,

    Thank you for sharing your final code with us. I think this is a very good solution and will be useful to the community. If you post it as a CodeLibrary your contribution will be rewarded with Telerik Points.

    Best wishes,
    Dobromir
    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.
  13. dick
    dick avatar
    11 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2011 Link to this post

    This doesn't seem to work when the tools are in a separate xml file and not declared in the mark up. I cannot get any context menu item when I call the contextMenu.get_items() method. Any suggestions?

    here is a sample of my code:
            var contextMenu = editor.getContextMenuByTagName("*");
            var menuItems = contextMenu.get_items();
            menuItems[0].get_element().style.display = "";

    menuItems[0] returns undefined.
  14. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Apr 2011 Link to this post

    Hi Dick,

    By design, initially the context menu's items are not populated.

    As you can see in the code of the related code library, the get_items() method is called in the context menu's ClientShow event - this ensures that the collection will be populated.

    Kind regards,
    Dobromir
    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
  15. Peter
    Peter avatar
    7 posts
    Member since:
    May 2008

    Posted 22 Aug 2011 Link to this post

     

    Hi alltogether

    you provide examples to enable disable on client side
    customItem.get_element().style.display = "";    
    customItem.get_element().parentNode.style.display = "";
    that works fine thank you!

    how do i access the shown text of a tool in a context item on client side?
    For example for a tool which toggles its function according the selection.

    customItem.get_???? = "new text"

    ( Server-Side I can access the text by

     

     

    EditorTool et = new EditorTool("Custom1");

     

    et.Text =

     

    "shown text on context menu";
    )

    the use case is the Hyperlink context menu
    - if the full url is shown, I want to have the custom menu button "strip url"
    - if only the document name is shown, I want to have the custom menu button "show url" 

    of course this can be solved with 2 buttons, but anyway is there a way to access
    the text of a button?

    Regards,
    Peter

     

  16. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 22 Aug 2011 Link to this post

    Hi Peter,

    The RadEditor's context menu's items are actually modified RadMenuItems and they inherit some of the client-side functionality of the RadMenu.

    In order to modify the text of the context menu element client-side you can use get_text() / set_text() methods of the RadMenuItem.

    Greetings,
    Dobromir
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  17. Peter
    Peter avatar
    7 posts
    Member since:
    May 2008

    Posted 23 Aug 2011 Link to this post

    Hi Dobromir
    thank you for your reply.

    customTool.set_text("new text") shows the text over
    the icon (see screen shot) instead of changing the text.

    this is not what i want.

    How do I access the custom tool in a way that
    the new text is displayed the right way?

    Greetings
    Peter
  18. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 23 Aug 2011 Link to this post

    Hi Peter,

    Please accept my sincere apologies for the misleading information.

    The RadEditor's context menus does not fully inherit the functionality of the RadMenuItem's. Nevertheless, you can change the text by directly modifying the content of the element holding the text, e.g.:
    //1st child holds the icon, 2nd child holds the text
    customItem.get_element().childNodes[1].innerHTML = "New Text";


    Kind regards,
    Dobromir
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017