Anders Hattestad
Jun 19, 2011
  6207
(1 votes)

How to change context menu in the edit mode tree view

imageIf one would like to change the right right click context menu, to add one or more options there are several different approaches one could take. One that I like is to attach myself to the PageSetup event. This event will trigger on all pages that inherit from PageBase. That includes most of the admin and edit mode pages. (if not all)

Code Snippet
  1. public static void Initialize(int bitflags)
  2. {
  3.     EPiServer.PageBase.PageSetup += new EPiServer.PageSetupEventHandler(PageBase_PageSetup);
  4. }

 

if the page is EditTree we can then try to attach to the Menu object that will provide the right context menu. That property is protected, so we have to use reflection:

Code Snippet
  1. PropertyInfo info = type.GetProperty("Menu",BindingFlags.Instance|BindingFlags.NonPublic);
  2. RightClickMenu menu = info.GetValue(sender, null) as RightClickMenu;

The whole code will look like this

Code Snippet
  1. static void sender_PreRender(object sender, EventArgs e)
  2. {
  3.     if (sender is EditTree)
  4.     {
  5.         //I'm in right context menu in edit mode
  6.         Type type = typeof(EditTree);
  7.         string str = (sender as EditTree).ResolveUrlFromUI("edit/");
  8.         string imageThemeUrl = (sender as EditTree).GetImageThemeUrl("Tools/");
  9.  
  10.         PropertyInfo info = type.GetProperty("Menu",BindingFlags.Instance|BindingFlags.NonPublic);
  11.         RightClickMenu menu = info.GetValue(sender, null) as RightClickMenu;
  12.         RightClickMenuItem item = new RightClickMenuItem("Archive",
  13.             null,
  14.             CreateMenuAction("deletepage", "/custom/AdminPages/Delete2Archive.aspx", ""), "AllowDelete()",
  15.             imageThemeUrl + "Delete.gif",
  16.             RightClickMode.All);
  17.  
  18.         menu.Add("MyItem",item);
  19.     }
  20.     else
  21.     {
  22.         //I'm in view mode
  23.         if ((sender as EPiServer.PageBase).ContextMenu != null && (sender as EPiServer.PageBase).ContextMenu.Menu != null)
  24.         {
  25.             //(sender as EPiServer.PageBase).ContextMenu.Menu.Add("MyItem", EPiServer.Security.AccessLevel.Edit, new EPiServer.RightClickMenuItem("My Script", "MyScript()", "MyScriptSubMenu"));
  26.         }
  27.     }
  28. }
  29. private static string CreateMenuAction(string action, string url, string data)
  30. {
  31.     return string.Format("OnContextMenuAction(\"{0}\", \"{1}\", \"{2}\")", action, url, data);
  32. }

In my code, I want the Archive option enabled just as the Delete option. If you want more logic when its enabled just create yourself a java script function and provide the java script name in the constructor of the RightClickMenuItem.

Jun 19, 2011

Comments

Jun 19, 2011 08:42 PM

Nice one, I have just done a similar thing with my PageTypeExtensions project but this was using a PageAdapter. I wasn't aware of the PageSetup event and that you could modify the edit/admin pages in this way :)

Andreas Olsen
Andreas Olsen Aug 8, 2011 04:36 PM

Im Trying to use the example, creating my own panel page.

Do i have to inherit something special for the page Delete2Archive.aspx.
I have created a simple aspx page. It is displayed fine, but when it shows up, the tree view does not work anymore.
Im using the newpage action.

RightClickMenuItem item = new RightClickMenuItem("Archive",
null,
CreateMenuAction("newpage", "/PlugIn/CopyLanguage.aspx", ""), "true",
imageThemeUrl + "New.gif",
RightClickMode.All);


I have tried to inherit from Episerver.UI.Edit.NewPage, SystemBasePage,PageBase and System.Web.UI.Page

Could you include the Delete2Archive.aspx and the cs file also or tell me if there is something im missing.


Anders Hattestad
Anders Hattestad Aug 8, 2011 07:04 PM

her is the Delete2Archive.aspx file

http://world.episerver.com/Code/Anders-Hattestad1/How-to-change-context-menu-in-the-edit-mode-tree-view/

Please login to comment.
Latest blogs
Implementing EmbeddedLocalization in Optimizely CMS 12

My previous post on translation (Translating Optimizely CMS 12 UI components) gives an overview of how to implement the FileXmlLocalizationProvider...

Eric Herlitz | Jan 27, 2023 | Syndicated blog

Breaking changes in EPiServer.CMS.TinyMce 4.0.0

After upgrading to the latest version of EPiServer.CMS.TinyMce, the dropdown with formats disappears. Learn how to get it back!

Tomas Hensrud Gulla | Jan 27, 2023 | Syndicated blog

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog

Image preview in Optimizely CMS12 all properties view

With these simple steps, you can now see an Image and its Metadata, including size and dimensions, when editing an Image property in Optimizely...

Tomas Hensrud Gulla | Jan 26, 2023 | Syndicated blog