Hi Kim,

OK, if you want this working now - I'll show you how. :-)  This is all based on Shannon's code and improvements/fixes done by Ivan. I take no credit in the code.

Create 2 files: TreePicker.cs and TreePicker.ascx

In TreePicker.cs - add the following code:

using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Xml;
using umbraco.editorControls.userControlGrapper;

namespace Our.Umbraco.usercontrols
{
    public partial class TreePicker : UserControl, IUsercontrolDataEditor
    {
        protected Repeater rptSelectedNodes;
        protected HiddenField PickedNodes;

        protected override void OnInit(System.EventArgs e)
        {
            base.OnInit(e);
            rptSelectedNodes.ItemDataBound += new System.Web.UI.WebControls.RepeaterItemEventHandler(rptSelectedNodes_ItemDataBound);
        }

        public object value
        {
            get
            {
                //put the node in umbraco
                bindXML(PickedNodes.Value);
                return PickedNodes.Value;
            }
            set
            {
                //get from umbraco
                PickedNodes.Value = value.ToString();
                bindXML(value.ToString());
            }
        }

        private void bindXML(string xml)
        {

            XmlDocument loadedNodes = new XmlDocument();
            try
            {
                loadedNodes.LoadXml(xml);
            }
            catch { }

            rptSelectedNodes.DataSource = loadedNodes.SelectNodes("/selectedNodes/selectedNode");
            rptSelectedNodes.DataBind();
        }

        void rptSelectedNodes_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
        {
            HtmlGenericControl liSelectNode = (HtmlGenericControl)e.Item.FindControl("liSelectNode");
            HtmlAnchor lnkSelectNode = (HtmlAnchor)e.Item.FindControl("lnkSelectNode");
            Literal litSelectNodeName = (Literal)e.Item.FindControl("litSelectNodeName");
            XmlNode thisNode = (XmlNode)e.Item.DataItem;
            int thisNodeId;
            if (int.TryParse(thisNode.Attributes["id"].Value, out thisNodeId))
            {
                umbraco.cms.businesslogic.CMSNode loadedNode = new umbraco.cms.businesslogic.CMSNode(thisNodeId);
                liSelectNode.Attributes["rel"] = thisNodeId.ToString();
                lnkSelectNode.HRef = string.Format("javascript:SyncItems({0});", thisNodeId);
                litSelectNodeName.Text = loadedNode.Text;
            }
        }
    }
}

Put the TreePicker.cs file in your /App_Code folder.

In TreePicker.ascx - add the following code:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Our.Umbraco.usercontrols.TreePicker" %>
<%@ Register TagPrefix="umb" TagName="tree" Src="~/umbraco/controls/Tree/TreeControl.ascx" %>
<script type="text/javascript">

    //a reference to the hidden field
    //storing the selected node data
    var hiddenField;

    //create a sortable, drag/drop list and
    //initialize the right panel with previously
    //saved data.
    jQuery(document).ready(function () {

        hiddenField = jQuery("#<%=PickedNodes.ClientID%>");
        jQuery(".right").sortable({
            stop: function (event, ui) { StorePickedNodes(); }
        });
        jQuery(".item a.close").live("click", function () {
            jQuery(this).parent().remove();
            StorePickedNodes();
        });

    });

    //Add event handler to the tree API.
    //Bind to the window load event as the document ready event
    //is too early to query for the tree api object
    jQuery(window).load(function () {
        //add a handler to the tree's nodeClicked event
        jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .addEventHandler("nodeClicked", function (e, node) {
            AddToRight(node);
        });
    });

    function AddToRight(node) {
        //get the node id of the node selected
        var nodeId = jQuery(node).attr("id");
        //check if node id already exists in the right panel
        if (jQuery(".right").find("li[rel='" + nodeId + "']").length > 0) {
            return;
        }
        //create a copy of the node clicked on the tree
        var jNode = jQuery(node).clone().find("a:first")
        //remove un-needed attributes
        jNode.removeAttr("href")
        .removeAttr("umb:nodedata")
        .attr("href", "javascript:SyncItems(" + nodeId + ");");
        //build a DOM object to put in the right panel
        jQuery("<div class='item'><ul class='rightNode'>" +
            "<li rel='" + nodeId + "' class='closed'>" +
            "</li></ul><a class='close' href='javascript:void(0);'>[X]</a></div>")
        .appendTo(".right")
        .find(".closed").append(jNode);
        //now update the hidden field with the
        //node selection
        StorePickedNodes();
    }

    //A method to sync the left tree to the item
    //selected in the right panel
    function SyncItems(nodeId) {
        jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .syncTree(nodeId.toString());
    }

    //were going to store both the node ids
    //and the html markup to re-render the 
    //right hand column as JSON to be put into
    //the database.
    function StorePickedNodes() {
        var val = "<selectedNodes>";
        jQuery(".right .item ul.rightNode li").each(function () {
            val += "<selectedNode id=\"" + jQuery(this).attr("rel") + "\" />";
        });
        val += "</selectedNodes>";
        //append the html markup        
        hiddenField.val(val);
    }

</script>
<%--Inline styles are dodgy, but simple for this demonstration--%>
<style type="text/css">
    .multiTreePicker .item ul.rightNode
    {
        float: left;
        margin: 0;
        padding: 0;
    }
    .multiTreePicker .item ul.rightNode li
    {
        margin: 0;
        padding: 0;
        list-style: none;
        font: icon;
        font-family: Arial,Lucida Grande;
        font-size: 12px;
        min-height: 20px;
    }
    .multiTreePicker .item ul.rightNode li a
    {
        background-repeat: no-repeat !important;
        border: 0 none;
        color: #2F2F2F;
        height: 18px;
        line-height: 18px;
        padding: 0 0 0 18px;
        text-decoration: none;
    }
    .multiTreePicker .item a
    {
        float: left;
    }
    .multiTreePicker .item a.close
    {
        margin-left: 5px;
    }
    .multiTreePicker .item
    {
        cursor: pointer;
        width: 100%;
        height: 20px;
    }
    .multiTreePicker .left.propertypane
    {
        width: 300px;
        float: left;
        clear: none;
        margin-right: 10px;
    }
    .multiTreePicker .right.propertypane
    {
        width: 300px;
        float: left;
        clear: right;
        padding: 5px;
    }
    .multiTreePicker .header
    {
        width: 622px;
    }
</style>
<div class="multiTreePicker">
    <div class="header propertypane">
        <div>
            Select items</div>
    </div>
    <div class="left propertypane">
        <umb:tree runat="server" ID="TreePickerControl" CssClass="myTreePicker" Mode="Standard"
            DialogMode="id" ShowContextMenu="false" IsDialog="true" TreeType="content" />
    </div>
    <div class="right propertypane">
        <asp:Repeater runat="server" ID="rptSelectedNodes" EnableViewState="false">
            <ItemTemplate>
                <div class="item">
                    <ul class="rightNode">
                        <li class="closed" runat="server" id="liSelectNode"><a runat="server" id="lnkSelectNode"
                            class="sprTree sprTreeDoc clicked">
                            <div>
                                <asp:Literal runat="server" ID="litSelectNodeName"></asp:Literal></div>
                        </a></li>
                    </ul>
                    <a class='close' href='javascript:void(0);'>[X]</a></div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</div>
<asp:HiddenField runat="server" ID="PickedNodes" />

Put the Treepicker.ascx in your /usercontrols folder.

Now in the Umbraco back-office, create a new data-type based on the "umbraco usercontrol wrapper" and select the '/usercontrols/TreePicker.ascx".

Job done! :-D

My advice is once Shannon has released the proper version of the data-type, upgrade/move to it... it will be so much better! :-)

Cheers, Lee.