Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kim Andersen 1447 posts 2194 karma points MVP
    Jul 02, 2010 @ 22:41
    Kim Andersen
    0

    Problems getting multi-node tree picker to work

    Hi all

    After some ncie help from Thomas Höhler on Twitter, I desided to create a post in here regarding a problem with the new datatype created by Shannon Deminick, the multi-node tree picker.

    First of all I have downloaded the latest files from Codeplex. Then I opened up the DataTypesForUmbraco.Controls.csproj in my Visual Studio 2008 (I couldn't open the DataTypesForUmbraco.sln, because it was saved in a newer version of Visual Studio. Don't know if this can cause any problems?). I compiled the project, and have copied the DataTypesForUmbraco.Controls.dll to my Umbraco 4.5 /bin-folder. Then created a new data type using Multi-node tree picker as the Render control.

    But when I have created the new property to one of my document types, I can't get the data type to work. As you can see in the image bellow I have the tree shown, but I can't select any of the nodes. I can open the tree, but when I click a node, nothing happens. Anyone have a clue to why this is not working?

    Thanks in advance :)

    /Kim A

     

  • Lee Kelleher 3863 posts 14495 karma points MVP 8x admin c-trib
    Jul 03, 2010 @ 13:43
    Lee Kelleher
    1

    Hi Kim,

    The version that is in the 'Data Types for Umbraco' project is still under development - there are differences between this and the version Shannon demoed at CG10 - which I know he's still working on.

    Shannon did release the source-code for the user-control based version over at the FARMCode blog:

    http://farmcode.org/post/2010/06/29/Multi-node-tree-picker-source-code-from-CodeGarden-2010.aspx

    Cheers, Lee.

  • Kim Andersen 1447 posts 2194 karma points MVP
    Jul 03, 2010 @ 13:59
    Kim Andersen
    0

    Ahh maybe that's why I couldn't get it working. But how can I implement the code from the FARMcode blog into my Umbraco installation? I'm just a frontend developer, so I'm not quite sure how to handle the c# code, and where to put the files for the datatype.

    /Kim A

  • Lee Kelleher 3863 posts 14495 karma points MVP 8x admin c-trib
    Jul 03, 2010 @ 14:27
    Lee Kelleher
    3

    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.

  • Kim Andersen 1447 posts 2194 karma points MVP
    Jul 03, 2010 @ 17:31
    Kim Andersen
    1

    Lee, YOU ROCK ;)

    It works just like a charm. When Shannon has released the new version I'll change the files/datatype for sure, but until then I'll use this version. Thanks again :)

    /Kim A

  • Daniel Bardi 912 posts 2539 karma points
    Jul 10, 2010 @ 08:41
    Daniel Bardi
    0

    How do you iterate the picked nodes in xslt?  Having trouble since the selected nodes are store as CDATA

  • Lee Kelleher 3863 posts 14495 karma points MVP 8x admin c-trib
    Jul 12, 2010 @ 08:45
    Lee Kelleher
    1

    Hi Daniel,

    Is this for the "usercontrol wrapper" version, or the uComponents data-type one? (from CodePlex)

    If it's the usercontrol version, try changing the "database datatype" setting from "ntext" to "nvarchar" - that should remove it from the CDATA.

    Cheers, Lee.

  • Daniel Bardi 912 posts 2539 karma points
    Jul 12, 2010 @ 09:41
    Daniel Bardi
    0

    It's the uComponents version... I worked it out until the bug is fixed.

    Check out the work-around here: http://www.danielbardi.com/post/2010/07/10/Parsing-nodes-from-Umbraco-Multi-Node-Tree-Picker.aspx

Please Sign in or register to post replies

Write your reply to:

Draft