Vladimir Vedeneev
Dec 5, 2010
(3 votes)

Workaround for several nodes with the same ID in the editor’s tree

Have you ever tried to display the same node in the several places simultaneously in the editor tree?

For example, returning a same child PageReference for different parents will result in it. I believe you faced with it during debugging your own page provider.

If not, first I’ll show you

How it NOT works

First of all, believe me that Structure tab and Favorites tab uses the same tree control. They really do. Ok, you can use reflector and check it.

Create simple hierarchy like this one:

Parent -> Chid1 -> Child2

Right-click on each of the nodes and select “Add to favorites”. You should see the following in the Favorites tab:


Expand the first level nodes, and you will see two instances of the same node in the tree:

Several same nodes in the tree 

But EPiServer isn’t ready for such cases. There’s no tooltip for second Child2 node. Click on the second Child2 node – selected is first Child2. Try to expand second Child1 node:

Several same nodes in the tree

Nothing happens!  Ok, try to “collapse” it and expand it again:

Several same nodes in the tree

And you can see the whole new tree under the second Child1 node!

Why is the world so cruel?

If not digging too deep, the idea is simple: they use the PageReference to generate ID of a node control, so from two identical nodes they got two identical HTML controls with the same ID… Which breaks their JS.


My first idea was to generate random IDs for all the nodes; for example, use Guid.NewGuid(). I’ve tried it. Now I know. The tree uses node ID to retrieve node PageReference. Yes, a node has PageReference among other properties on the client. BUT a tree prefer to use node ID.

Ok, I couldn’t sleep for weeks and found an Idea – all I need is something that is parsed into the same PageRefernces, but differs in string representation. I tried a number of ideas here, but most simple is just adding leading zero to a string representation of a PageReference. For the integer it doesn’t change its numerical meaning, so PageReferences like “1” and “01” are the same, but these ARE different client IDs for controls! This will also work for complex references, like 1__RemoteSite. Exactly what I need.

So, basically all I need is to append zeroes to IDs of the “duplicated” nodes, which are already shown in the tree under some other paths. Bad thing here is that there’s no (easy?) way to understand what nodes are already shown to the particular visitor, so I need to create some cache on the server side.


It is easy: create & register adapter for tree, subscribe for ItemDataBound of TreeControl, and change DataPath in a smart way.

Control adapter registration (file <Web project>\App_Browsers\AdapterMappings.browser):

   1: <browsers>
   2:   <browser refID="Default">
   3:     <controlAdapters>
   4:       <adapter controlType="EPiServer.UI.WebControls.PageTreeView" adapterType="MyNamespace.PageTreeViewAdapter" />
   5:     </controlAdapters>
   6:   </browser>
   7: </browsers>

Control adapter implementation sample (simple, to understand idea):

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Reflection;
   5: using System.Text;
   6: using System.Web.UI.WebControls.Adapters;
   8: using EPiServer.UI.WebControls;
  10: namespace MyNamespace
  11: {
  12:     public class PageTreeViewAdapter : HierarchicalDataBoundControlAdapter
  13:     {
  14:         protected override void OnInit(EventArgs e)
  15:         {
  16:             base.OnInit(e);
  17:             ((PageTreeView)this.Control).PageTreeViewItemDataBound += this.TreeControl_PageTreeViewItemDataBound;
  18:         }
  20:         private static int dummyCounter;
  22:         private void TreeControl_PageTreeViewItemDataBound(object sender, PageTreeViewEventArgs e)
  23:         {
  24:             // Generate a number of leading zeroes
  25:             var leadingZeroes = new StringBuilder().Append('0', dummyCounter++);
  27:             // We cannot just rewrite DataPath - use reflection
  28:             var property = typeof(PageTreeNode).GetProperty("DataPath", BindingFlags.Public | BindingFlags.Instance);
  30:             property.SetValue(e.Item, leadingZeroes + e.Item.DataPath, null);
  31:         }
  32:     }
  33: }

Control adapter implementation sample (more smart):

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Reflection;
   5: using System.Web.UI.WebControls.Adapters;
   7: using EPiServer.UI.WebControls;
   9: namespace MyNamespace
  10: {
  11:     public class PageTreeViewAdapter : HierarchicalDataBoundControlAdapter
  12:     {
  13:         private const BindingFlags PropertyBindingFlags = BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.FlattenHierarchy;
  14:         private static readonly PropertyInfo PageTreeNodeDataPathProperty = typeof(PageTreeNode).GetProperty("DataPath", PropertyBindingFlags);
  15:         private static readonly Dictionary<string, Dictionary<string, string>> TreeToDataPathsHash = new Dictionary<string, Dictionary<string, string>>();
  17:         protected PageTreeView TreeControl
  18:         {
  19:             get { return Control as PageTreeView; }
  20:         }
  22:         protected override void OnInit(EventArgs e)
  23:         {
  24:             base.OnInit(e);
  25:             this.TreeControl.PageTreeViewItemDataBound += this.TreeControl_PageTreeViewItemDataBound;
  26:         }
  28:         private void TreeControl_PageTreeViewItemDataBound(object sender, PageTreeViewEventArgs e)
  29:         {
  30:             var newDataPath = this.GetDataPath(e.Item.DataPath, e.Item.CombinedDataPath);
  31:             if (newDataPath != null)
  32:             {
  33:                 PageTreeNodeDataPathProperty.SetValue(e.Item, newDataPath, null);
  34:             }
  35:         }
  37:         private string GetDataPath(string nodeId, string nodeViewPath)
  38:         {
  39:             // The same path CAN appear in different trees, so use separate cache for each tree (Structure, Favorites, select Page dialog etc)
  40:             string treeKey = this.TreeControl.ClientID;
  41:             Dictionary<string, string> idToPathHash;
  42:             if (!TreeToDataPathsHash.TryGetValue(treeKey, out idToPathHash))
  43:             {
  44:                 idToPathHash = new Dictionary<string, string>();
  45:                 TreeToDataPathsHash.Add(treeKey, idToPathHash);
  46:             }
  48:             var index = nodeViewPath.LastIndexOf('/');
  49:             var parentPath = nodeViewPath.Substring(0, index);
  51:             nodeId = nodeId.TrimStart('0');
  53:             for (;;)
  54:             {
  55:                 string existingParentPath;
  56:                 if (idToPathHash.TryGetValue(nodeId, out existingParentPath))
  57:                 {
  58:                     if (string.Compare(existingParentPath, parentPath, StringComparison.InvariantCultureIgnoreCase) == 0)
  59:                     {
  60:                         return nodeId;
  61:                     }
  62:                 }
  63:                 else
  64:                 {
  65:                     idToPathHash.Add(nodeId, parentPath);
  66:                     return nodeId;
  67:                 }
  68:                 nodeId = "0" + nodeId;
  69:             }
  70:         }
  71:     }
  72: }

It works!

That’s it:


Ideas? Comments? Am I doing something absolutely wrong?

Dec 05, 2010


Joel Abrahamsson
Joel Abrahamsson Dec 6, 2010 10:58 AM

Very clever solution Vladimir! And a very interesting read.

Have you filed a bug with EPiServer?

Vladimir Vedeneev
Vladimir Vedeneev Dec 6, 2010 09:23 PM

Thanks! Yep, they confirmed it's a bug, but it's not public yet.

Joel Abrahamsson
Joel Abrahamsson Dec 17, 2010 12:12 AM

I tried in R2 and it has been fixed for the favorites tab. Unfortunately though the problem remains in the structure tab :(

Joel Abrahamsson
Joel Abrahamsson Dec 17, 2010 12:13 AM

Good part however is that your fix still works :)

Please login to comment.
Latest blogs
Zombie Properties want to Eat Your Brains

It’s a story as old as time. You work hard to build a great site. You have all the right properties – with descriptive names – that the content...

Joe Mayberry | Mar 29, 2023 | Syndicated blog

Optimizely finally releases new and improved list properties!

For years, the Generic PropertyList has been widely used, despite it being unsupported. Today a better option is released!

Tomas Hensrud Gulla | Mar 28, 2023 | Syndicated blog

Official List property support

Introduction Until now users were able to store list properties in three ways: Store simple types (int, string, DateTime, double) as native...

Bartosz Sekula | Mar 28, 2023

New dashboard implemented in CMS UI 12.18.0

As part of the CMS UI 12.18.0 release , a new dashboard has been added as a ‘one stop shop’ to enable editors to access all of their content items,...

Matthew Slim | Mar 28, 2023

How to Merge Anonymous Carts When a Customer Logs In with Optimizely Commerce 14

In e-commerce, it is common for users to browse a site anonymously, adding items to their cart without creating an account. Later, when the user...

Francisco Quintanilla | Mar 27, 2023

How to Write an xUnit Test to Verify Unique Content Type Guids in Content Management

When developing an Optimizely CMS solution, it is important to ensure that each content type has a unique GUID. If two or more content types share...

Minesh Shah (Netcel) | Mar 27, 2023