radtreeview in custom dropdown in editor

[Atiq Ur Rehman]

hi I am trying to use this http://www.telerik.com/support/kb/article/b454K-gea-b454T-bgk.aspx example but it's not working for me. I am using the latest version of your controls. The error I am getting is client side error saying 'Object doesn't support this property or method.' The error is coming on line 317 of the following code.
Also when I see the editor in browser it doesn't show the icon for this custom treeview? and it doesn't show the full text, just shows the half text which in this case would be Quest.
Here is the code;

	<style type="text/css">
	.radeditor.Default.rade_wrapper
	{
	height:480px;
	width:640px;
	}
	.radeditor.Default.rade_wrapper
	{
	font: normal 11px Arial, Verdana, Sans-serif;
	}
	.radeditor.Default .rade_wrapper_corner.rade_corner_top_left
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') 0 -26px no-repeat;
	}
	.radeditor.Default .rade_wrapper_corner
	{
	width: 5px; height: 5px; line-height: 5px; font-size:1px;
	}
	.radeditor.Default .rade_wrapper_center.rade_center_top
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') 0 0 repeat-x;
	}
	.radeditor.Default .rade_wrapper_center
	{
	height: 5px; line-height: 5px; font-size:1px;
	}
	.rade_center_top
	{
	background-color: #515151 !important;
	}
	.radeditor.Default .rade_wrapper_corner.rade_corner_top_right
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') 100% -14px no-repeat;
	}
	.radeditor.Default .rade_leftVerticalSide
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.VertSideSprites.gif') 0 0 repeat-y;
	}
	.rade_leftVerticalSide
	{
	background-color: #515151 !important;
	}
	.Default .rade_tlbVertical
	{
	background-color:#646464;
	}
	.rade_tlbVertical
	{
	width: 2px; font-size:1px;
	}
	.rade_toolZone
	{
	background-color: #515151 !important;
	}
	.Default.rade_toolbarWrapper
	{
	background-color:#515151 !important;
	}
	.rade_toolbarWrapper
	{
	float: left;
	height: auto;
	}
	.radeditor.Default .rade_rightVerticalSide
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.VertSideSprites.gif') 100% 0 repeat-y;
	}
	.rade_rightVerticalSide
	{
	background-color: #515151 !important;
	}
	.radeditor.Default .rade_editorModesCell
	{
	width:100px;
	}
	.radeditor.Default .rade_wrapper_corner.rade_corner_bottom_left
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') 0 -65px no-repeat;
	}
	.radeditor.Default .rade_wrapper_center.rade_center_bottom
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') 0 -99px repeat-x;
	}
	.rade_center_bottom
	{
	background-color: #515151 !important;
	}
	.radeditor.Default .rade_wrapper_corner.rade_corner_bottom_right
	{
	background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Editor.CornersSprites.gif') -6px -53px no-repeat;
	}
	.rade_toolbar.Default .TreeviewDropdown
	{
	background-image: url(http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
	}
	</style>
	<telerik:RadEditor ID="documentEditor" runat="server"
	DialogHandlerUrl="/dotnetnuke_4_8_2_multi/DesktopModules/TelerikWebUI/Telerik.Web.UI.DialogHandler.aspx"
	EditModes="Design, Preview" Height="500px" Language="en-GB"
	onclientcommandexecuting="OnClientCommandExecuting" Skin="Hay" Width="100%">
	<tools>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="Cut" />
	<telerik:EditorTool Name="Copy" />
	<telerik:EditorTool Name="Paste" />
	<telerik:EditorTool Name="PasteAsHtml" />
	<telerik:EditorTool Name="PasteFromWord" />
	<telerik:EditorTool Name="Undo" />
	<telerik:EditorTool Name="Redo" />
	<telerik:EditorTool Name="FindAndReplace" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="Bold" />
	<telerik:EditorTool Name="Italic" />
	<telerik:EditorTool Name="Underline" />
	<telerik:EditorTool Name="StrikeThrough" />
	<telerik:EditorTool Name="Subscript" />
	<telerik:EditorTool Name="Superscript" />
	<telerik:EditorTool Name="FontName" />
	<telerik:EditorTool Name="FontSize" />
	<telerik:EditorTool Name="RealFontSize" />
	<telerik:EditorTool Name="ForeColor" />
	<telerik:EditorTool Name="BackColor" />
	<telerik:EditorTool Name="ApplyClass" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="InsertParagraph" />
	<telerik:EditorTool Name="InsertHorizontalRule" />
	<telerik:EditorTool Name="InsertDate" />
	<telerik:EditorTool Name="InsertOrderedList" />
	<telerik:EditorTool Name="InsertSnippet" />
	<telerik:EditorTool Name="InsertSymbol" />
	<telerik:EditorTool Name="InsertTime" />
	<telerik:EditorTool Name="InsertFormElement" />
	<telerik:EditorTool Name="InsertUnorderedList" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="JustifyCenter" />
	<telerik:EditorTool Name="JustifyFull" />
	<telerik:EditorTool Name="JustifyLeft" />
	<telerik:EditorTool Name="JustifyNone" />
	<telerik:EditorTool Name="JustifyRight" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="TableWizard" />
	<telerik:EditorTool Name="DeleteTable" />
	<telerik:EditorTool Name="DeleteCell" />
	<telerik:EditorTool Name="DeleteColumn" />
	<telerik:EditorTool Name="DeleteRow" />
	<telerik:EditorTool Name="InsertColumnLeft" />
	<telerik:EditorTool Name="InsertColumnRight" />
	<telerik:EditorTool Name="InsertRowAbove" />
	<telerik:EditorTool Name="InsertRowBelow" />
	<telerik:EditorTool Name="InsertTable" />
	<telerik:EditorTool Name="MergeColumns" />
	<telerik:EditorTool Name="MergeRows" />
	<telerik:EditorTool Name="SetCellProperties" />
	<telerik:EditorTool Name="SetTableProperties" />
	<telerik:EditorTool Name="SplitCell" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="ConvertToLower" />
	<telerik:EditorTool Name="ConvertToUpper" />
	<telerik:EditorTool Name="AjaxSpellCheck" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="TemplateManager" />
	<telerik:EditorTool Name="ImageManager" />
	<telerik:EditorTool Name="SetImageProperties" />
	<telerik:EditorTool Name="AbsolutePosition" />
	<telerik:EditorTool Name="LinkManager" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="ToggleScreenMode" />
	</telerik:EditorToolGroup>
	<telerik:EditorToolGroup>
	<telerik:EditorTool Name="TreeviewDropdown" Text="Questions" ShowText="true" />
	</telerik:EditorToolGroup>
	</tools>
	<fontnames>
	<telerik:EditorFont Value="Agency FB" />
	<telerik:EditorFont Value="Algerian" />
	<telerik:EditorFont Value="Arial" />
	<telerik:EditorFont Value="Arial Black" />
	<telerik:EditorFont Value="Arial Narrow" />
	<telerik:EditorFont Value="Arial Rounded MT Bold" />
	<telerik:EditorFont Value="Arial Unicode MS" />
	<telerik:EditorFont Value="Baskerville Old Face" />
	<telerik:EditorFont Value="Batang" />
	<telerik:EditorFont Value="Bauhaus 93" />
	<telerik:EditorFont Value="Bell MT" />
	<telerik:EditorFont Value="Berlin Sans FB" />
	<telerik:EditorFont Value="Berlin Sans FB Demi" />
	<telerik:EditorFont Value="Bernard MT Condensed" />
	<telerik:EditorFont Value="Blackadder ITC" />
	<telerik:EditorFont Value="Bodoni MT" />
	<telerik:EditorFont Value="Bodoni MT Black" />
	<telerik:EditorFont Value="Bodoni MT Condensed" />
	<telerik:EditorFont Value="Bodoni MT Poster Compressed" />
	<telerik:EditorFont Value="Book Antiqua" />
	<telerik:EditorFont Value="Bookman Old Style" />
	<telerik:EditorFont Value="Bookshelf Symbol 1" />
	<telerik:EditorFont Value="Bradley Hand ITC" />
	<telerik:EditorFont Value="Britannic Bold" />
	<telerik:EditorFont Value="Broadway" />
	<telerik:EditorFont Value="Brush Script MT" />
	<telerik:EditorFont Value="Calibri" />
	<telerik:EditorFont Value="Californian FB" />
	<telerik:EditorFont Value="Calisto MT" />
	<telerik:EditorFont Value="Cambria" />
	<telerik:EditorFont Value="Candara" />
	<telerik:EditorFont Value="Castellar" />
	<telerik:EditorFont Value="Centaur" />
	<telerik:EditorFont Value="Century" />
	<telerik:EditorFont Value="Century Gothic" />
	<telerik:EditorFont Value="Century Schoolbook" />
	<telerik:EditorFont Value="Chiller" />
	<telerik:EditorFont Value="Colonna MT" />
	<telerik:EditorFont Value="Comic Sans MS" />
	<telerik:EditorFont Value="Consolas" />
	<telerik:EditorFont Value="Constantia" />
	<telerik:EditorFont Value="Cooper Black" />
	<telerik:EditorFont Value="Copperplate Gothic Light" />
	<telerik:EditorFont Value="Corbel" />
	<telerik:EditorFont Value="Courier New" />
	<telerik:EditorFont Value="Curlz MT" />
	<telerik:EditorFont Value="Elephant" />
	<telerik:EditorFont Value="Engravers MT" />
	<telerik:EditorFont Value="Eras Bold ITC" />
	<telerik:EditorFont Value="Eras Light ITC" />
	<telerik:EditorFont Value="Eras Medium ITC" />
	<telerik:EditorFont Value="Estrangelo Edessa" />
	<telerik:EditorFont Value="Footlight MT Light" />
	<telerik:EditorFont Value="Franklin Gothic Book" />
	<telerik:EditorFont Value="Garamond" />
	<telerik:EditorFont Value="Georgia" />
	<telerik:EditorFont Value="High Tower Text" />
	<telerik:EditorFont Value="Kartika" />
	<telerik:EditorFont Value="Lucida Sans" />
	<telerik:EditorFont Value="Microsoft Sans Serif" />
	<telerik:EditorFont Value="Mangal" />
	<telerik:EditorFont Value="Symbol" />
	<telerik:EditorFont Value="Tahoma" />
	<telerik:EditorFont Value="Times New Roman" />
	<telerik:EditorFont Value="Verdana" />
	<telerik:EditorFont Value="Webdings" />
	</fontnames>
	<languages>
	<telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" />
	<telerik:SpellCheckerLanguage Code="en-US" Title="English(US)" />
	<telerik:SpellCheckerLanguage Code="en-AU" Title="English (AU)" />
	<telerik:SpellCheckerLanguage Code="de-DE" Title="German" />
	<telerik:SpellCheckerLanguage Code="fr-FR" Title="French" />
	<telerik:SpellCheckerLanguage Code="es-ES" Title="Spanish" />
	<telerik:SpellCheckerLanguage Code="it-IT" Title="Italian" />
	</languages>
	<imagemanager MaxUploadFileSize="500000" deletepaths="/Images/editorImages/imageManager" uploadpaths="/Images/editorImages/imageManager" viewpaths="/Images/editorImages/imageManager" />
	<documentmanager deletepaths="/Images/editorImages/documentManager" uploadpaths="/Images/editorImages/documentManager" viewpaths="/Images/editorImages/documentManager" />
	<content></content>
	<flashmanager deletepaths="/Images/editorImages/flashManager" uploadpaths="/Images/editorImages/flashManager" viewpaths="/Images/editorImages/flashManager" />
	<mediamanager deletepaths="/Images/editorImages/mediaManager" uploadpaths="/Images/editorImages/mediaManager" viewpaths="/Images/editorImages/mediaManager" />
	<TemplateManager DeletePaths="/images/editorImages/templateManager" UploadPaths="/images/editorImages/templateManager" ViewPaths="/images/editorImages/templateManager" />
	</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)
	{
	//ERROR COMING ON THIS LINE                     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;
	objobjobjobj = 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;
	objobjobjobj = 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>

[Atiq Ur Rehman]

hello can some one answer please??

[George]

Hi Atiq,

I upgraded the desired example to use the latest version of RadControls for ASP.NET AJAX. Please find it attached.

If you still experience problems, please open a support ticket and send us a sample runnable project where the behavior can be observed. We will check it locally and do our best to provide a solution.

Sincerely,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Atiq Ur Rehman]

Hi Thanks for the help. It seems working now for me but I get a javascript error when ever the page is loaded. Every thing works fine though but i still get this javascript error. I am using IE 7. The error says, Telerik.Web.UI.Editor.CommandList is null or not an object.

I don't get this in firefox, only in IE 6 & 7.

I am using this in DNN so can't send the project, its a big module.

Thanks
Atiq

[Tervel]

Hi Atiq,

You probably load your scripts even when the editor is not available on the page (e.g. perhaps you load the editor on the page under some special conditions). If there is no editor on the page, the Telerik.Web.UI.Editor.CommandList will be undefined.

To fix the problem please wrap the reference to the command in an if statement, e.g.

if (typeof(Telerik.Web.UI.Editor.CommandList) != "undefined")
{
    Telerik.Web.UI.Editor.CommandList["TreeviewDropdown"] = function(commandName, editor, args)       
    {       
          var oTool = editor.getToolByName("TreeviewDropdown");
          var toolIcon = oTool.get_element();       
          window.setTimeout(function()       
          {                              
                         ShowDropdown(editor, toolIcon);       
          }, 100);       
          return false;       
    };      
}



Best wishes,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Atiq Ur Rehman]

Yep, this works, the editor is not visible when the page is loaded. I got another error thought which was 'Telerik.Web.UI.Editor' is null so I wrapped it with another if, so the whole thing looks like 

if

(typeof(Telerik.Web.UI.Editor) != "undefined")

{

if (typeof(Telerik.Web.UI.Editor.CommandList) != "undefined")

{

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;

};

Telerik.Web.UI.Editor.CommandList[

"rfTreeviewDropdown"] = function(commandName, editor, args)

{

var oTool = editor.getToolByName("rfTreeviewDropdown"); //get a reference to the custom tool

var toolIcon = oTool.get_element();

window.setTimeout(

function()

{

ShowDropdownRF(editor, toolIcon);

}, 100);

return false;

};

Telerik.Web.UI.Editor.CommandList[

"PageBreak"] = function(commandName, editor, args)

{

editor.pasteHtml(

"<p STYLE='page-break-before: always'></p>");

};

}

}

Thanks for your help.