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

JavaScript error with RadTextBox within RadPane and AjaxManager

9 Answers 186 Views

Ajax

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

thepilsbury asked on 24 Nov 2008, 03:16 PM

Hi,

I have a page that has an RadAjaxManager, RadSplitter with three RadPanes. One of the Panes has a RadTReeView. When the user clicks a node in the treeview then the COntentURL of the content pane is updated. There is also a RadTextBox in the content pane that is shown when a particular node of the tree is clicked. Interestingly this was all working fine when I was using a standard asp:textbox but after I changed the asp textbox to a RAdTextbox i get a Javascript error when clicking on any nodes of the tree: 'undefined' is null or not an object.

Any ideas?

Code below:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="perform.aspx.cs" Inherits="perform" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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" style="height: 100%">  
        
            <head runat="server">  
        
                <title>Activity Criteria</title> 
        
            </head> 
        
            <body scroll="no">  
        
                <form id="form1" runat="server" style="height: 100%">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadTreeView1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadSplitter1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">  
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' 
        
                        style="border: 0px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                    <script type="text/javascript">  
        
                        function GetRadWindow()  
        
                        {  
        
                          var oWindow = null;  
        
                          if (window.radWindow) oWindow = window.radWindow;  
        
                          else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;  
        
                          return oWindow;  
        
                        }  
        
                        // function called in order to close a window  
        
                        function closeRadWindow(windowname)  
        
                        {  
        
                            // close parent of this window  
        
                            GetRadWindow().BrowserWindow.closeRadWindow(windowname);                  
        
                        }  
        
                        // calls a function on the parent form to close this window  
        
                        function CloseMe()  
        
                        {  
        
                            GetRadWindow().BrowserWindow.closeRadWindow("perform");               
        
                        }               
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Height="100%" 
        
                    Width="100%" FullScreenMode="true">  
        
                    <telerik:RadPane ID="RadPane4" runat="server" Scrolling="None">  
        
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Items-Capacity="0" Orientation="Vertical" 
        
                            ResizeMode="AdjacentPane" SplitBarsSize="" Width="100%">  
        
                            <telerik:RadPane ID="rpFolders" runat="server" Width="140">  
        
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick" 
        
                                    AllowNodeEditing="True" AccessKey="T" EnableDragAndDrop="False">  
        
                                    <CollapseAnimation Duration="100" Type="OutQuint" /> 
        
                                    <ExpandAnimation Duration="100" Type="OutQuart" /> 
        
                                </telerik:RadTreeView> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
        
                            <telerik:RadPane ID="rpMainContent" runat="server" CssClass="pm_paneContent">  
        
                                <table cellspacing="0" cellpadding="4" width="100%" border="0" class="pm_tableDetail">  
        
                                    <tr> 
        
                                        <td> 
        
                                            <div id="divComment" class="pm_ContentBorder">  
        
                                                <table width="100%" border="0" cellspacing="2" cellpadding="0">  
        
                                                    <tr> 
        
                                                        <td valign="top">  
        
                                                            <telerik:RadTextBox ID="RadTextBox1" runat="server" OnTextChanged="RadTextBox1_TextChanged" 
        
                                                                Rows="12" SelectionOnFocus="CaretToEnd" TextMode="MultiLine" Width="94%" EnableEmbeddedSkins="false" 
        
                                                                AutoPostBack="true" CssClass="pm_fldText" MaxLength="100000">  
        
                                                            </telerik:RadTextBox> 
        
            <%--                                                <asp:TextBox ID="txtCommets" runat="server" CssClass="pm_fldText" Rows="10" Style="width: 99%" 
        
                                                                AutoPostBack="true" TextMode="MultiLine" OnTextChanged="RadTextBox1_TextChanged"></asp:TextBox> 
        
            --%>                                            </td> 
        
                                                    </tr> 
        
                                                </table> 
        
                                            </div> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadPane3" runat="server" Height="37px" Scrolling="None">  
        
                        <div class="CenteredToolBar">  
        
                            <telerik:RadToolBar ID="RadToolBar1" runat="server" SkinID="submitBar" OnButtonClick="RadToolBar1_ButtonClick">  
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                            </telerik:RadToolBar> 
        
                        </div> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

9 Answers, 1 is accepted

answered on 24 Nov 2008, 05:57 PM

I'm getting a similar problem...

I have the Editor in a User Control, with the javascript under it on the user control page itself. (Page has a MasterPage)
On the ascx page I surrounded the user control with radajaxpanel.

My Editor has custom buttons calling the Javascript functions, if I add this panel as stated, I get the errors "Command Not Implemented" as if I never created the Javascript, but if I take off the ajaxpanel around the user control, it works fine.

Editor Javascript Call:

    
            <telerik:RadEditor ID="reSPL" Runat="server"  
        
                                    Skin="Web20" 
        
                                    Height="330px" 
        
                                    StripFormattingOnPaste="AllExceptNewLines"  
        
                                    StripFormattingOptions="AllExceptNewLines" 
        
                                    ExternalDialogsPath="~/Controls/DialogWindows"   
        
                                    NewLineBr="false" 
        
                                    EditModes="Design"> 
        
                                    <Tools> 
        
                                        <telerik:EditorToolGroup Tag="FormatControls"> 
        
                                            <telerik:EditorTool Name="Save"  
        
                                                Text="Save"  
        
                                                ShowIcon="True"  
        
                                                ShowText="false" /> 
        
                                            <telerik:EditorSeparator Visible="true" /> 
        
                           ...etc...

    
            Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args) 
        
                                        { 
        
                                            __doPostBack("SaveButton",''); 
        
                                        };

This works:

    
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
        
                <uc2:SPLEditor ID="ucSPLEditor" runat="server" /> 
        
            </asp:Content>

This Breaks it:

    
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
        
                <telerik:RadAjaxLoadingPanel  
        
                    ID="AjaxLoadingPanel1"  
        
                    Runat="server"  
        
                    height="100%"  
        
                    InitialDelayTime="1"  
        
                    IsSticky="false"   
        
                    Transparency="15"  
        
                    BackColor="#E0E0E0" 
        
                    width="100%"  
        
                    style="position:absolute;"  
        
                    HorizontalAlign="Center"> 
        
                          <asp:Panel ID="pnlSpacer" runat="server"  style="vertical-align:middle" Height="300px" /> 
        
                          <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading6.gif") %>' style="border:0;" /> 
        
                </telerik:RadAjaxLoadingPanel>   
        
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" LoadingPanelID="AjaxLoadingPanel1"> 
        
                <uc2:SPLEditor ID="ucSPLEditor" runat="server" /> 
        
                </telerik:RadAjaxPanel> 
        
            </asp:Content>