Question

I’m creating a custom control as a kind of wrapper for a popular jQuery plugin. However, I’m new to custom controls and I’m having a bit of a problem with how things work and I’m afraid I don’t even know enough to properly phrase my Google searches.

I need to have the control look a certain way in ASP.NET’s XML for ease of use later. Right now it looks like this:

<js:jsTree ID="what" runat="server">
   <jsTreeNode ID="node_1" Title="node_1v" runat="server" />
   <jsTreeNode ID="node_2" Title="node_2v" runat="server" />
   <jsTreeNode ID="node_3" Title="node_3v" runat="server">
      <jsTreeNode ID="subnode_1" Title="subnode_1v" runat="server" />
      <jsTreeNode ID="subnode_2" Title="subnode_2v" runat="server" />
   </jsTreeNode>
</js:jsTree>

I want it to look like:

<js:jsTree ID="what" runat="server">
   <Types>
      <js:Type ID="default" Rules="whatever" runat="server" />
   </Types>
   <Nodes>
      <js:TreeNode ID="node_1" Title="node_1v" runat="server" />
      <js:TreeNode ID="node_2" Title="node_2v" runat="server" />
      <js:TreeNode ID="node_3" Title="node_3v" runat="server">
         <js:TreeNode ID="subnode_1" Title="subnode_1v" runat="server" />
         <js:TreeNode ID="subnode_2" Title="subnode_2v" runat="server" />
      </js:TreeNode>
   </Nodes>

What can I do to layout the objects so they appear this way? Can anyone point me at a tutorial where someone has done something similar?

Thanks!

Answer 1

It’s definitely possible!

The jsTree control class needs to have two collection properties on it:

[PersistenceMode(PersistenceMode.InnerProperty)]
public TypeCollection Types {
    get {
        if (_types == null) {
            _types = new TypeCollection();
        }
        return _types;
    }
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public NodeCollection Nodes {
    get {
        if (_nodes == null) {
            _nodes = new NodeCollection();
        }
        return _nodes;
    }
}

And then the TreeNode type has to have a similar (but slightly different) property:

[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public NodeCollection Nodes {
    get {
        if (_nodes == null) {
            _nodes = new NodeCollection();
        }
        return _nodes;
    }
}

Hopefully this is enough to get you going. This obviously is not a complete code sample but I’d rather not repeat things that you already know!