<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeviewDialog.aspx.cs" Inherits="_TreeviewDialog" %>
<%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<style>
.rade_toolbar.Default .TreeviewDropdown
{
  background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
}
</style> 
</head>
<body>
    <form id="form1" runat="server">
    <asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>     
        <div>
            <telerik:RadEditor Height="200px" Width="300px"  ID="RadEditor1" runat="server">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="TreeviewDropdown" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
            
            <div onclick="return cancelEvent(event)"
            
            id="treeDiv" style="border-right: 1px solid; border-top: 1px solid; display: none;
                z-index: 101; background: white; border-left: 1px solid; width: 200px; border-bottom: 1px solid;
                position: absolute; height: 200px; overflow:auto;">
                <telerik:RadTreeView ID="RadTreeView1" Height="200" Width="200" runat="server"
                    OnClientNodeClicking="HandleClick"                     
                    >
                    
                </telerik:RadTreeView>
            </div>
            
            

            <script type="text/javascript">
            function cancelEvent(e)
            {                             
                if (e.preventDefault) e.preventDefault();
                if (e.stopPropagation) e.stopPropagation();
                e.cancelBubble = true;
                e.returnValue = false;
                return false;
            }
                                                
			//Function to hide the dropdown when the user clicks somewhere else on the page 
   			var oPopupHandler = function (e)
			{						    
				var oDiv = document.getElementById("treeDiv");
				if (oDiv.style.display != "none") oDiv.style.display = "none";				
			};
									
			document.onclick = oPopupHandler;
												  										  											  															
			function HandleClick(sender, args)
			{			
				var treeDiv = document.getElementById("treeDiv");    
				var editor = treeDiv.RadEditor;			
				if (treeDiv.RestorePoint) treeDiv.RestorePoint.select();
				editor.pasteHtml(args.get_node().get_text());				
				treeDiv.style.display = "none";
			}
    
			function ShowDropdown(radEditor, toolIcon)
			{   
				if (!radEditor.get_document().onmouseup)radEditor.get_document().onmouseup = oPopupHandler;
			    
				var treeDiv = document.getElementById("treeDiv");
				treeDiv.RadEditor = radEditor;    
				treeDiv.RestorePoint = radEditor.createRestorePoint();			        				
				treeDiv.style.display = (treeDiv.style.display == "none" ? "" : "none");				
				
				treeDiv.style.top = (GetY(toolIcon) + 45) + "px";
				treeDiv.style.left = (GetX(toolIcon) + 10) + "px";				
				
			}

			function GetX(obj)
			{ 
			    var curleft = 0; 
			
			    if (obj.offsetParent) 
			    { 
				    while (obj.offsetParent) 
				    { 
				        curleft += obj.offsetLeft; 
				        obj = obj.offsetParent; 
				    } 
			    }
			    else if (obj.x) 
			    {
				    curleft += obj.x; 
    			}
			    return curleft; 
			}

			 
			function GetY(obj)
			{ 
			    var curtop = 0; 
    			
			    if (obj.offsetParent) 
			    { 
				    while (obj.offsetParent) 
				    { 
				        curtop += obj.offsetTop; 
				        obj = obj.offsetParent; 
				    } 
			    } 
			    else if (obj.y) 
			    {
				    curtop += obj.y; 
		    	    
		        }
		        return curtop; 
			}
 

			
			Telerik.Web.UI.Editor.CommandList["TreeviewDropdown"] = function(commandName, editor, args)
            {
               var oTool = editor.getToolByName("TreeviewDropdown"); //get a reference to the custom tool                                            
               var toolIcon = oTool.get_element();
				window.setTimeout(function()
				{						
			        ShowDropdown(editor, toolIcon);
			    }, 100);
			    return false;
            };

			</script>
        </div>
    </form>
</body>
</html>
