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

RadEditor Commandlist in dynamicly loaded usercontrol

3 Answers 106 Views

Editor

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

Woutersl asked on 12 Mar 2009, 09:22 AM

Hy all,

I was wondering if their is a cleaner way to achieve the following scenario.
For this webproject we use templates with dynamicly loaded custom user controls. One of those controls can contain one or more RadEditors. On those Editors we have implemented a custom commandbutton.
For the browser to correctly find the script witch defines the command I have to put the script on my template. This approach, however, gets me a Telerik.Web.UI.Editor is undefined script error. Since the editors or not on the template itself.

The workaround I used is to implement a dummy Editor on my template before any of my custom controls are loaded so that the script can find an editor. I use styling to hide the dummy editor since the script won't work if I put visible = "false" for the editor.

Please find my template below:

    
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head2" runat="server">     
        
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        
            </head> 
        
            <body> 
        
                <form id="form2" method="post"  runat="server"> 
        
                <telerik:RadScriptManager ID="scriptManager" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                        <asp:ScriptReference Path="~/Js/HiderUnhider.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <div class="hidenPanel" style="display:none;"> 
        
                    <%-- Dummy Editor --%> 
        
                    <telerik:RadEditor ID="dummyEditor" SpellCheckSettings-DictionaryPath="~/TDF/" runat="server" Visible="true" Enabled="true" /> 
        
                </div> 
        
                <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> 
        
                    <div id="generalDiv"> 
        
                        <div> 
        
                        </div> 
        
                        <div id="menuHolder"> 
        
                            <div style="float:left;"> 
        
                                dynamicly loaded menucontrol goes here 
        
                            </div> 
        
                            <div  style="float:right;" id="userLogin"> 
        
                            </div> 
        
                            <div style="clear:both;"></div> 
        
                        </div> 
        
                        <div id="contentWrapper"> 
        
                            dynamcly loaded control with Rad Editors goes here 
        
                        </div> 
        
                        <div id="footerDiv"></div> 
        
                    </div> 
        
                </telerik:RadAjaxPanel>     
        
                <script type="text/javascript" language="javascript"> 
        
                    //<![CDATA[                                                    
        
                    /* Implementation of the Custom command, declared in the editor's Tools.xml file! */
        
                    Telerik.Web.UI.Editor.CommandList["CustomButton"] = function(commandName, editor, oTool) {
        
                        // alert ("CustomButtoncommand called");            
        
                        //Some script to perform when the button is clicked
        
                    };        
        
                    //]]> 
        
                </script> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30"  
        
                    BackColor="Black" IsSticky="false" style="position:absolute;top:0;left:0" Width="100%" Height="100%"> 
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                        style="border: 0px; margin-top:15px; margin-left:20px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                </form> 
        
            </body> 
        
            </html>

Any ideas if this can be achieved in a cleaner way ?

3 Answers, 1 is accepted

answered on 19 Mar 2009, 08:33 AM

Hy all,

I thought I post the solution provided for future reference.
It can be achieved by wrapping the JavaScript command of the custom button in if (typeof(RadEditorCommandList) != "undefined") clause and firing it in the pageLoad function of ASP.NET AJAX framework, e.g.

    <script type="text/javascript" language="javascript">
       function pageLoad()
        {
            if (typeof(RadEditorCommandList) != "undefined")
            {
                Telerik.Web.UI.Editor.CommandList["ShadowBoxButton"] = function(commandName, editor, oTool)
                {
                    alert("ShadowBoxButton command called");
                };
            }
        }
    </script>