Views: 2361
Number of votes: 3
Average rating:

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:

 Favorites

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.

Workaround?

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.

Implementation

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;
   7:  
   8: using EPiServer.UI.WebControls;
   9:  
  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:         }
  19:  
  20:         private static int dummyCounter;
  21:  
  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++);
  26:  
  27:             // We cannot just rewrite DataPath - use reflection
  28:             var property = typeof(PageTreeNode).GetProperty("DataPath", BindingFlags.Public | BindingFlags.Instance);
  29:  
  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;
   6:  
   7: using EPiServer.UI.WebControls;
   8:  
   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>>();
  16:  
  17:         protected PageTreeView TreeControl
  18:         {
  19:             get { return Control as PageTreeView; }
  20:         }
  21:  
  22:         protected override void OnInit(EventArgs e)
  23:         {
  24:             base.OnInit(e);
  25:             this.TreeControl.PageTreeViewItemDataBound += this.TreeControl_PageTreeViewItemDataBound;
  26:         }
  27:  
  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:         }
  36:  
  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:             }
  47:  
  48:             var index = nodeViewPath.LastIndexOf('/');
  49:             var parentPath = nodeViewPath.Substring(0, index);
  50:  
  51:             nodeId = nodeId.TrimStart('0');
  52:  
  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:

image

Ideas? Comments? Am I doing something absolutely wrong?

Dec 05, 2010

Joel Abrahamsson
(By Joel Abrahamsson, 12/6/2010 11:58:45 AM)

Very clever solution Vladimir! And a very interesting read.

Have you filed a bug with EPiServer?

Vladimir Vedeneev
(By Vladimir Vedeneev, 12/6/2010 10:23:54 PM)

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

Joel Abrahamsson
(By Joel Abrahamsson, 12/17/2010 1:12:28 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
(By Joel Abrahamsson, 12/17/2010 1:13:19 AM)

Good part however is that your fix still works :)

Please login to comment.