This is a migrated thread and some comments may be shown as answers.

radtreeview in custom dropdown in editor

5 Answers 89 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Atiq Ur Rehman
Top achievements
Rank 1
Atiq Ur Rehman asked on 10 Sep 2008, 10:53 AM
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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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=neutralPublicKeyToken=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>       
 

5 Answers, 1 is accepted

Sort by
0
Atiq Ur Rehman
Top achievements
Rank 1
answered on 12 Sep 2008, 08:20 AM
hello can some one answer please??
0
George
Telerik team
answered on 15 Sep 2008, 08:19 AM
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.
0
Atiq Ur Rehman
Top achievements
Rank 1
answered on 18 Sep 2008, 01:59 PM
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
0
Tervel
Telerik team
answered on 19 Sep 2008, 06:29 AM
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.
0
Atiq Ur Rehman
Top achievements
Rank 1
answered on 19 Sep 2008, 08:00 AM
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.

Tags
Editor
Asked by
Atiq Ur Rehman
Top achievements
Rank 1
Answers by
Atiq Ur Rehman
Top achievements
Rank 1
George
Telerik team
Tervel
Telerik team
Share this question
or