CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

Last post 03-29-2010, 10:49 PM by wolf11th. 8 replies.
Sort Posts: Previous Next
  •  03-24-2010, 11:34 PM 59636

    CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel


    Hi there,
    I have a cuteeditor in tabpanel of a tabcontainer.
    I use following code to resize the editor. However, for any ajax postback, it will report the following error message. Is there any way to overcome this problem? thx

    error message : Microsoft JScript runtime error: Object doesn't support this property or method


    Partial Class Test3

    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

    Dim aa As String = ""

    End Sub

    End Class


    ________________________________________________________________________________________________________________________________
     
     
     
     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test3.aspx.vb" Inherits="Test3" %>

    <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>

    <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI" TagPrefix="asp" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    <!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></title>

     

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

    <asp:Button ID="Button1" runat="server" Text="Button" />

    <cc1:TabContainer ID="TabContainer1" runat="server">

    <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanel1" Height="100%">

    <HeaderTemplate>

    <div>

    123</div>

    </HeaderTemplate>

    <ContentTemplate>

    <div id="div1" style="overflow: auto;">

    asdfsdaf

    </div>

    </ContentTemplate>

    </cc1:TabPanel>

    <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanelSurveyor"

    Height="100%">

    <HeaderTemplate>

    <div>

    Surveyors Section</div>

    </HeaderTemplate>

    <ContentTemplate>

    <div id="divSurveyor" style="overflow: auto;">

    <CE:Editor ID="Editor1" runat="server">

    </CE:Editor>

    </div>

    </ContentTemplate>

    </cc1:TabPanel>

    </cc1:TabContainer>

    </ContentTemplate>

    </asp:UpdatePanel>

    </div>

    </form>

    </body>

    </html>

    <script type="text/javascript">

    var editor1 = document.getElementById('<%= Editor1.ClientID %>');

    function CuteEditor_OnInitialized(editor) {

    if (editor1 != null) {

    editor1.SetHeight(document.documentElement.clientHeight - 70 - 70 - 50);

    }

    }

    window.onresize = function() {

    if (editor1 != null) {

    editor1.SetHeight(document.documentElement.clientHeight - 70 - 70 - 50);

    }

    }

     
     
     
     
     
     
     


     
  •  03-25-2010, 12:05 AM 59638 in reply to 59636

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    It seems to be with the ajax update panel, but not the problem with tabcontainer. I can reproduce the error without the tabcontainer in the ajax update panel.
    desperate
    pls help
  •  03-25-2010, 12:24 AM 59639 in reply to 59638

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    the error message is located at:
    editor1.SetHeight(document.documentElement.clientHeight - 70 - 70 - 50);
     
    it seems taht the editor1 loses the method setheight after ajax postback.
     
     
  •  03-25-2010, 12:44 AM 59640 in reply to 59639

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    I've managed this problem by following code:

    document.getElementById('<%= cmsSurveyorComment.ClientID %>').style.height=document.documentElement.clientHeight - 70 - 70 - 50;

     
    It seems that setHeight doesn't work after ajax postback. Hopefully you can fix it in the next version.
     
  •  03-25-2010, 6:18 AM 59644 in reply to 59640

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    it turns out it's too early to say it's addressed. actually   following command doesn't work in firefox and chrome.
    document.getElementById('<%= cmsSurveyorComment.ClientID %>').style.height=document.documentElement.clientHeight - 70 - 70 - 50;
     
    anyone has any idea? please help~~~
  •  03-26-2010, 2:07 AM 59666 in reply to 59644

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    Hi wolf11th,
     
    Please download the latest version and tes the example below. This issue have been fixed in version 6.6.
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   
    4. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head runat="server">   
    8.     <title>example</title>   
    9. </head>   
    10. <body>   
    11.     <form id="form1" runat="server">   
    12.     <div>   
    13.         <asp:ScriptManager ID="ScriptManager1" runat="server">   
    14.         </asp:ScriptManager>   
    15.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">   
    16.             <ContentTemplate>   
    17.                 <asp:Button ID="Button1" runat="server" Text="Do PostBack" />   
    18.                 <cc1:TabContainer ID="TabContainer1" runat="server">   
    19.                     <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanel1" Height="100%">   
    20.                         <HeaderTemplate>   
    21.                             <div>   
    22.                                 tab1</div>   
    23.                         </HeaderTemplate>   
    24.                         <ContentTemplate>   
    25.                             tab1 text   
    26.                         </ContentTemplate>   
    27.                     </cc1:TabPanel>   
    28.                     <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanelSurveyor">   
    29.                         <HeaderTemplate>   
    30.                             tab2   
    31.                         </HeaderTemplate>   
    32.                         <ContentTemplate>   
    33.                             <div id="divSurveyor" style="overflow: auto;">   
    34.                                 <CE:Editor ID="Editor1" runat="server" Height="400" ShowPreviewMode="False" ResizeMode="None">   
    35.                                 </CE:Editor>   
    36.                             </div>   
    37.                         </ContentTemplate>   
    38.                     </cc1:TabPanel>   
    39.                 </cc1:TabContainer>   
    40.             </ContentTemplate>   
    41.         </asp:UpdatePanel>   
    42.     </div>   
    43.     </form>   
    44. </body>   
    45. </html>   
    46.   
    47. <script>   
    48. function CuteEditor_OnInitialized(editor)   
    49. {   
    50.   editor.SetHeight("1000");   
    51. }   
    52. </script>  
    Regards,
     
    ken
  •  03-28-2010, 12:38 AM 59688 in reply to 59666

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    thx Ken,
    Your code works fine. however,  I have more than 1 editor which are in different tabpanel. different editor would have differnt screen size. How can I indentify each editor? and also I need to resize the editor screen when window.onresize happens. I actually tried to use following code which is provided by you in another replay. 
    It is NOT working ~~~ Can you pls help
     

    var editor1 = document.getElementById('<%= Editor1.ClientID %>');

    function CuteEditor_OnInitialized(editor) {

    if (editor1 != null) {

    editor1.SetHeight(document.documentElement.clientHeight - 70 - 70 - 50);

    }

    }

    window.onresize = function() {

    if (editor1 != null) {

    editor1.SetHeight(document.documentElement.clientHeight - 70 - 70 - 50);

    }

    }

     
  •  03-29-2010, 2:04 AM 59700 in reply to 59688

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    hi wolf11th ,
     
    Try
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   
    4. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    6.   
    7. <html xmlns="http://www.w3.org/1999/xhtml">   
    8. <head runat="server">   
    9.     <title>example</title>   
    10. </head>   
    11. <body>   
    12.     <form id="form1" runat="server">   
    13.     <div>   
    14.         <asp:ScriptManager ID="ScriptManager1" runat="server">   
    15.         </asp:ScriptManager>   
    16.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">   
    17.             <ContentTemplate>   
    18.                 <asp:Button ID="Button1" runat="server" Text="Do PostBack" />   
    19.                 <cc1:TabContainer ID="TabContainer1" runat="server">   
    20.                     <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanel1" Height="100%">   
    21.                         <HeaderTemplate>   
    22.                             <div>   
    23.                                 tab1</div>   
    24.                         </HeaderTemplate>   
    25.                         <ContentTemplate>   
    26.                             tab1 text   
    27.                         </ContentTemplate>   
    28.                     </cc1:TabPanel>   
    29.                     <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanelSurveyor">   
    30.                         <HeaderTemplate>   
    31.                             tab2   
    32.                         </HeaderTemplate>   
    33.                         <ContentTemplate>   
    34.                             <div id="divSurveyor" style="overflow: auto;">   
    35.                                 <CE:Editor ID="Editor1" runat="server" Height="400" ShowPreviewMode="False" ResizeMode="None">   
    36.                                 </CE:Editor>   
    37.                             </div>   
    38.                         </ContentTemplate>   
    39.                     </cc1:TabPanel>   
    40.                     <cc1:TabPanel runat="server" HeaderText="Surveyors Section" ID="TabPanel2">   
    41.                         <HeaderTemplate>   
    42.                             tab3   
    43.                         </HeaderTemplate>   
    44.                         <ContentTemplate>   
    45.                             <div id="div1" style="overflow: auto;">   
    46.                                 <CE:Editor ID="Editor2" runat="server" Height="400" ShowPreviewMode="False" ResizeMode="None">   
    47.                                 </CE:Editor>   
    48.                             </div>   
    49.                         </ContentTemplate>   
    50.                     </cc1:TabPanel>   
    51.                 </cc1:TabContainer>   
    52.             </ContentTemplate>   
    53.         </asp:UpdatePanel>   
    54.     </div>   
    55.     </form>   
    56. </body>   
    57. </html>   
    58.   
    59. <script>   
    60. var e1=false;   
    61. var e2=false;   
    62. function CuteEditor_OnInitialized(editor)   
    63.   
    64. {   
    65. var editor1=document.getElementById("<%= Editor1.ClientID %>");   
    66. var editor2=document.getElementById("<%= Editor2.ClientID %>");   
    67.   
    68. switch (editor.id) {    
    69. case editor1.id:    
    70.   editor1.SetHeight("1000");   
    71.   e1=true;   
    72.   
    73. break;    
    74. case editor2.id:    
    75. editor2.SetHeight("300");    
    76. e2=true;   
    77. break;    
    78. }    
    79.   
    80. }   
    81. //you can use the code below to change the editor size. but switch between tab will Activation function window.onresize   
    82. //window.onresize=function()   
    83. //{   
    84.   
    85. //var editor1=document.getElementById("<%= Editor1.ClientID %>");   
    86. //var editor2=document.getElementById("<%= Editor2.ClientID %>");   
    87. //if(e1==true)   
    88. //{   
    89. //  editor1.SetHeight("100");   
    90. //}   
    91.   
    92. //if(e2==true)   
    93. //{   
    94. //  editor2.SetHeight("200");   
    95. //}   
    96. //}   
    97. </script>  
    Regards,
     
    Ken
  •  03-29-2010, 10:49 PM 59729 in reply to 59700

    Re: CuteEditor_OnInitialized(editor) doesn't work when ajax call back in the tab panel

    thx Ken, that works
View as RSS news feed in XML