November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off
Anders Hattestad
Anders Hattestad
Jun 20, 2011
  6464
(3 votes)

Solution to many children in edit modes page tree

There was a forum post some days ago, where the question was how to manage 1000+ child's under a single parent by Deane Barker.

I have since that post been thinking about how it’s possible to change how the edit mode page tree is rendered.

First I though about control adaptors, but it’s not possible to override methods on the target control, but only to add logic in the OnInit, OnLoad etc..

But a hidden pearl provided me with a solution: TagMapping.

TagMapping is a method where you can override a web control to use another web control in the web.config

just like this:

Code Snippet
  1. <location path="EPiServer/UI">
  2.   <system.web>
  3.     <httpRuntime maxRequestLength="1000000" />
  4.     <pages enableEventValidation="true">
  5.       <tagMapping>
  6.         <add tagType="EPiServer.UI.WebControls.PageTreeView" mappedTagType="IteraFun.EPiServerOverride.PageTreeViewOwn"/>
  7.       </tagMapping>
  8.       <controls>
  9.         <add tagPrefix="EPiServerUI" namespace="EPiServer.UI.WebControls" assembly="EPiServer.UI" />
this is extremely powerful, and I have not known about this before. With one line in the web.config its possible to override a web control with your own class.

The class I wanted to override was PageTreeView. That is a class with some overrides like GetData based on a viewPath. First I override that method like this:

Code Snippet
  1. protected override HierarchicalDataSourceView GetData(string viewPath)
  2. {
  3.     if (viewPath.EndsWith("All"))
  4.         (this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetRest;
  5.     else
  6.         (this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetMax10;
  7.     var result = base.GetData(viewPath.Replace("All", ""));
  8.     return result;
  9. }
  10.  
  11. private PageDataCollection GetMax10(PageReference pageLink)
  12. {
  13.  
  14.     var pages = DataFactory.Instance.GetChildren(pageLink);
  15.     if (pages.Count > 10)
  16.     {
  17.         var count = pages.Count;
  18.         pages.RemoveRange(10, pages.Count - 10);
  19.         var page = EPiServer.DataFactory.Instance.GetPage(pageLink);
  20.         page = page.CreateWritableClone();
  21.         page.PageName = "Show rest 11-" + count;
  22.         page.ParentLink = pageLink;
  23.         pages.Add(page);
  24.     }
  25.     return pages;
  26. }
  27. private PageDataCollection GetRest(PageReference pageLink)
  28. {
  29.     var pages = DataFactory.Instance.GetChildren(pageLink);
  30.     if (pages.Count > 10)
  31.     {
  32.         var count = pages.Count;
  33.         pages.RemoveRange(0, 10);
  34.     }
  35.     return pages;
  36. }
If the viewPath contains All, I will show the rests of the pages, else I will show 10 pages, and a show rest node.

this will display something like this:

image

Then the tricky part is to change how the last node is rendered.

PageTreeView implements ICallbackEventHandler, and I have to override those. These are not virtual, but using the new statement it’s possible to change it’s behavior.

I copied the base code from ILSpy, and discovered of course a lot of private and even internal methods. No worry thou, that was expected.

I made myself a healer method

Code Snippet
  1. public object DoMethod(string name, object[] parameters)
  2. {
  3.     var method = typeof(PageTreeView).GetMethod(name, System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
  4.     return method.Invoke(this, parameters);
  5. }

that took care of that problem Smile

Then I rewrote the GetCallbackResult() like this

Code Snippet
  1. string _eventArgument;
  2. public new void RaiseCallbackEvent(string eventArgument)
  3. {
  4.     this._eventArgument = eventArgument;
  5. }
  6. public new string GetCallbackResult()
  7. {
  8.     string eventArgument = this._eventArgument;
  9.     StringBuilder stringBuilder = null;
  10.     if (!string.IsNullOrEmpty(eventArgument))
  11.     {
  12.         PageTreeNode treeNode = null;
  13.         PageTreeView.CallbackArgument callbackArgument = new PageTreeView.CallbackArgument(eventArgument);
  14.         if (callbackArgument.Action.Equals("populate"))
  15.         {
  16.             DoMethod("PopulateFromViewPath",new object[] {callbackArgument.DataPath, 0});
  17.         }
  18.         else
  19.         {
  20.             if (callbackArgument.Action.Equals("select"))
  21.             {
  22.                 //this.PopulateRecursive(callbackArgument.DataPath);
  23.                 DoMethod("PopulateRecursive", new object[] { callbackArgument.DataPath });
  24.             }
  25.             else
  26.             {
  27.                 if (callbackArgument.Action.Equals("update"))
  28.                 {
  29.                     //treeNode = this.LoadTreeNode(callbackArgument.DataPath);
  30.                     treeNode = DoMethod("LoadTreeNode",new object[] { callbackArgument.DataPath}) as PageTreeNode;
  31.                 }
  32.             }
  33.         }
  34.         string text = string.Empty;
  35.         try
  36.         {
  37.             text = callbackArgument.ContextNodeId.Substring(this.ClientID.Length, callbackArgument.ContextNodeId.IndexOf('_', this.ClientID.Length) - this.ClientID.Length);
  38.         }
  39.         catch
  40.         {
  41.         }
  42.         if (!string.IsNullOrEmpty(text))
  43.         {
  44.             foreach (PageTreeNode pageTreeNode in this.Nodes)
  45.             {
  46.                 if ((pageTreeNode.DataItem as PageData).PageLink.ID == (pageTreeNode.DataItem as PageData).ParentLink.ID)
  47.                 {
  48.                     var propInfo = typeof(PageTreeNode).GetProperty("DataPath", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Instance);
  49.                     propInfo.SetValue(pageTreeNode, (pageTreeNode.DataItem as PageData).PageLink.ID + "All", null);
  50.                         
  51.                            
  52.                 }
  53.                 typeof(PageTreeNode).GetProperty("RootIdentifier", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).SetValue(pageTreeNode, text, null);
  54.                 //pageTreeNode.RootIdentifier = text;
  55.             }
  56.         }
  57.         base.ClearChildState();
  58.         //this.CreateChildControlsFromItems(true);
  59.         DoMethod("CreateChildControlsFromItems", new object[] { true });
  60.         stringBuilder = new StringBuilder();
  61.         HtmlTextWriter htmlTextWriter = new HtmlTextWriter(new StringWriter(stringBuilder));
  62.         //this.RenderCallbackContents(htmlTextWriter, treeNode);
  63.         DoMethod("RenderCallbackContents", new object[] { htmlTextWriter, treeNode });
  64.         htmlTextWriter.Close();
  65.     }
  66.     this.Page.Response.ContentType = "text/plain";
  67.     if (stringBuilder == null)
  68.     {
  69.         return string.Empty;
  70.     }
  71.     return stringBuilder.ToString();
  72. }

The node image Is the same PageData as the parent node, and I did a check if the ParentPageLink is the same as PageLink, and if it was I change the DataPath

Code Snippet
  1. foreach (PageTreeNode pageTreeNode in this.Nodes)
  2. {
  3.     if ((pageTreeNode.DataItem as PageData).PageLink.ID == (pageTreeNode.DataItem as PageData).ParentLink.ID)
  4.     {
  5.         var propInfo = typeof(PageTreeNode).GetProperty("DataPath", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Instance);
  6.         propInfo.SetValue(pageTreeNode, (pageTreeNode.DataItem as PageData).PageLink.ID + "All", null);
  7.     }
  8.     typeof(PageTreeNode).GetProperty("RootIdentifier", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).SetValue(pageTreeNode, text, null);
  9.     //pageTreeNode.RootIdentifier = text;
  10. }

So when I expand the Show rest node now, the datapath is set to the parentNodes PageReference ID and added All

This works like a charm,

image

 

This logic could easy be adapted to show

pages 1-10
pages 11-20
pages 21-30
pages 31-40
pages 41-48, but my code here only shows the rest Smile

The only problem is that if you are in view mode on a page that is hidden, that page will not be visible in the edit tree. This is fixable to turn of this feature when one enters edit mode. It seems like the viewpath is empty when that happens, so I changed the GetData like this

Code Snippet
  1. protected override HierarchicalDataSourceView GetData(string viewPath)
  2. {
  3.     if (viewPath=="")
  4.         (this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetChildrenDefault;
  5.     else if (viewPath.EndsWith("All"))
  6.         (this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetRest;
  7.     else
  8.         (this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetMax10;
  9.     var result = base.GetData(viewPath.Replace("All", ""));
  10.     return result;
  11. }

I’m not sure if this change to the edit tree is a smart thing to do, but I’m more excited about the TagMapping feature. That technic is certainly a great method to extend a already extendable CMS like EPiServer even further.

Code can be found here

Jun 20, 2011

Comments

Jun 20, 2011 10:45 AM

Hi Anders

What a great find! TagMapping's look potentially awesome!

Lee

egilagre
egilagre Jun 20, 2011 11:03 AM

Mindblowing!

Anders Hattestad
Anders Hattestad Jun 20, 2011 11:28 AM

TagMapping sure opens up some interesting new ways of changing existing code.
You can read more about it here
http://msdn.microsoft.com/en-us/library/system.web.configuration.pagessection.aspx

Magnus Rahl
Magnus Rahl Jun 20, 2011 11:54 AM

I had no idea TagMapping existed, that is very powerful. Thanks!

Jun 20, 2011 01:43 PM

Cool! Adding container pages is sometimes unnecessary when they don't have any structural meaning.

Anders Hattestad
Anders Hattestad Jun 20, 2011 01:45 PM

I think I would have added year, month folders if I had 1000+ items, but this is a way around if you cant do that.

Erik Nordin Wahlberg
Erik Nordin Wahlberg Jun 20, 2011 04:38 PM

This should only be used for UI purpose, if you have more then 100-200 childs you should structure the pages in containers or some other way. But it's a really neat feature.

Kjetil Simensen
Kjetil Simensen Aug 10, 2011 10:31 AM

Nice! just what we needed and i'll will definitively try this out.

however it looks like i need to do some changes to make this work in CMS 6 (the code here is from CMS 6 R2) but thanks again for the inspiration and code examples :)

-Kjetil

Minesh Shah (Netcel)
Minesh Shah (Netcel) Sep 4, 2012 07:11 PM

Fantastic bit of code although just have a quick question, my pages are all beneath the homepage and when i first go into Edit mode the whole tree is expanded and the itemes are not organised into their virtual folder when i Contract the page tree and re-expand it is than organised properly

Is their anyway round this ?

Thanks

Minesh

Anders Hattestad
Anders Hattestad Sep 4, 2012 07:18 PM

Long time since I wrote it. Guess you coud check if
if (viewPath == "")
(this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetChildrenDefault;
should be GetMax10

Minesh Shah (Netcel)
Minesh Shah (Netcel) Sep 5, 2012 10:14 AM

Thank you very much just tried that although not much luck, that crashed out the whole PageTree. Let me go through the code in more detail and see if i spot anything else. My GetData method contains the below

if (viewPath == "")
(this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetMax10;
else if (viewPath.EndsWith("All"))
(this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetRest;
else
(this.DataSource as PageDataSource).PageLoader.GetChildrenCallback = GetMax10;

var result = base.GetData(viewPath.Replace("All", ""));
return result;

Please login to comment.
Latest blogs
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

I'm running Optimizely CMS on .NET 9!

It works 🎉

Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog

Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

See all blogs