TabStrip in an active ascx collection with Editor window fails

7 posts, 0 answers
  1. George
    George avatar
    73 posts
    Member since:
    Oct 2014

    Posted 19 Nov 2014 Link to this post

    I am using ASP:TabContainer with ASP:Panel and ran into problem with refresh.  I could not refresh just the tab, only the only page - I really need just a tab refresh. 

    So, I though I would tryRadTabStrip.

    <%@ Register Src="~/Admin/GroupBasics.ascx" TagName="GroupBasicsCS" TagPrefix="uc" %>
    <%@ Register Src="~/Admin/GroupForm.ascx" TagName="GroupFormCS" TagPrefix="uc" %>
    <%@ Register Src="~/Admin/GroupMemberPage.ascx" TagName="GroupMembersPageCS" TagPrefix="uc" %>
    <%@ Register Src="~/Admin/GroupMembers.ascx" TagName="GroupMembersCS" TagPrefix="uc" %>
    ...

        <telerik:RadTabStrip ID="GroupTabStrip" runat="server" OnClientTabSelecting="" AutoPostBack="false"  r Align="Justify" MultiPageID="GroupTabPV" SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab PageViewID="GroupBasicsPV"   Text="Group Basics"></telerik:RadTab>
                    <telerik:RadTab PageViewID="GroupFormPV" Text="Group Form"></telerik:RadTab>
                    <telerik:RadTab PageViewID="GroupMembersPagePV" Text="Group Members Page"></telerik:RadTab>
                    <telerik:RadTab PageViewID="GroupMembersPV" Text="Group Members"></telerik:RadTab>
                </Tabs>
        </telerik:RadTabStrip>
          <telerik:RadMultiPage runat="server" ID="GroupTabPV" SelectedIndex="0">
                <telerik:RadPageView runat="server" ID="GroupBasicsPV">
                    GroupBasicsPV
                    <div class="contentWrapper">
                        <uc:GroupBasicsCS runat="server" ID="GroupBasicsCS" />
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="GroupFormPV">
                    GroupFormPV
                    <div class="contentWrapper">
                        <uc:GroupFormCS runat="server" ID="GroupFormCS" />
                    </div>
                </telerik:RadPageView>
     
                <telerik:RadPageView runat="server" ID="GroupMembersPagePV">
                    GroupMembersPagePV
                    <div class="contentWrapper">
                        <uc:GroupMembersPageCS runat="server" ID="GroupMembersPageCS" />
                    </div>
                </telerik:RadPageView>

                <telerik:RadPageView runat="server" ID="GroupMembersPV">
                    GroupMembersPV
                    <div class="contentWrapper">
                        <uc:GroupMembersCS runat="server" ID="GroupMembersCS"/>
                    </div>
                </telerik:RadPageView>
           </telerik:RadMultiPage>

    With this setup if I try to open a RadEditor in the window I get a document not defined error:

    Type.registerNamespace("Telerik.Web.UI.Editor");
    Uncaught TypeError: Cannot read property 'document' of null 
    in some Telerik code:
    (function(a,b,c){b.RestorePoint=function(e,d){this.Window=e;
    this.Document=e.document;
    this.container=(d)?d:this.Document.body;

    AND

    when a do a refresh it not only refreshes the whole page, but it also changes the tab back to the first one.  It is also annoying that all the pages in the tabs are called on page creation before their tabs are clicked, potentially a huge waste of resources. 

    There is might be a way to work around all this but the examples and documentation completely lack using an ascx collection. I would have thought a rather normal use.  I am probably doing it all wrong but I could only find one example with ascx's, TabStrip - Render Selected Page Only .  I probably need to control the tab strip more directly which I would pursue but the Document not defined error kind of kills using the TabStrip at all. 


  2. George
    George avatar
    73 posts
    Member since:
    Oct 2014

    Posted 19 Nov 2014 in reply to George Link to this post

    As well a  calendar control on the page and a window with Rad controls also fail with similar errors.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 24 Nov 2014 Link to this post

    Hello George,

    Thank you for contacting Telerik Support.

    You mentioned that you are using ASP:TabContainer, but I am afraid that I was unable to locate such usage in the provided code snippet. Do you have it nested in the RadTabStrip? In addition, please demonstrate the approach that you use at your end for loading the RadEditor in a window. In addition, are you using the RadWindow or any other popup extender?

    Thank you in advance for your cooperation. I am looking forward to your reply.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. George
    George avatar
    73 posts
    Member since:
    Oct 2014

    Posted 24 Nov 2014 in reply to Nencho Link to this post

    I am trying to switch from ASP:TabContainer to Rad Tabs, they were taken out for the Rad Tab experiment.  This is RadTabStrip only trying to implement ascx pages.

    To open the RadWindow this JavaScript code it called.
           var editor = $find("<%=DisplayText.ClientID%>");
           editor.set_html("");
           currentWindow = $find("<%=DisplayTextWindow.ClientID %>");  // for save and close
           radopen(null, "DisplayTextWindow", 800, 600);

    This is my RadWindow with the Editor
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <Windows>
            <telerik:RadWindow ID="DisplayTextWindow" Title="Display Text" Behaviors="Close,Resize,Move" CssClass="dialogEditorWindow" Modal="True"  runat="server">
                <ContentTemplate>
                    <div class="dialogDivEditorContainer">
                        <div class="dialogDivEditor">
                            <telerik:RadEditor  ID="DisplayText"  Width="99%" Height="99%"   ForeColor="White" BackColor="White" toolsfile="~/Files/EditorTools.xml" CssClass="dialogEditor" runat="server">
                                 <CssFiles>
                                    <telerik:EditorCssFile Value="~/Styles/EditorContentArea.css" />
                                </CssFiles>
                            </telerik:RadEditor>
                        </div>
                        <div class="dialogDivButtons">
                                <telerik:RadButton ID="DisplayTextWindowSave" Text="Save" OnClientClicked="DisplayTextWindowSave" 
                                                AutoPostBack="false" runat="server"  />&nbsp;&nbsp;
                                <telerik:RadButton ID="DisplayTextWindowCancel" Text="Cancel" OnClientClicked="WindowCancel"  
                                                  AutoPostBack="false" runat="server"  />
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
    ... other windows
    </telerik:RadWindowManager>

    The EditorContentArea.css file is to get around an issue where the Editor takes the page's background colour for its background.

    George



  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Nov 2014 Link to this post

    Hi George,

    Generally when you open a RadWindow that has inside its ContentTemplate a RadEditor you must call the editor's onParentNodeChanged() method. This method reattaches the editor's handlers and it must be called because when the window is opened it changes its place in the DOM tree. More information on the matter is available in the RadEditor Does Not Work in RadWindow help article.

    If the above step, however, do not help can you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that I can proceed further with the investigation.


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. George
    George avatar
    73 posts
    Member since:
    Oct 2014

    Posted 27 Nov 2014 Link to this post

    I haven't tried it (I am sure it will work) but a question.

    The link has ASP.cs code
    function fixEditor(sender, args) {
      $telerik.$(".RadEditor", sender.get_contentElement()).each(function (index, elem) {
           if (elem.control && elem.control.onParentNodeChanged) elem.control.onParentNodeChanged();
      });
    }
    that your sample in the zip does not (the aspx.cs file has no code except an empty Page_Load().  Would you please explain the discrepancy between them.  Your solution is simpler.

    Thanks,
    George
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Nov 2014 Link to this post

    Hi George,

    The purpose of the mentioned code is to get all of the RadEditor controls inside the content template by their .RadEditor class and call their onParentNodeChanged() method. Considering the fact, however, that in the provided example there is only one instance of the RadEditor, I have referenced it by a client ID.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017