Control gets malformed when inside RadPageView with RenderSelectedPageOnly set

[Absolute Data Group]

The title pretty much says it all.

I have a rad tab strip linked to a radmultipage consisting of 3 page views. The second page view contains a radfileexplorer.

The first time I click on the tab for the second page view, the control loads up just fine. If I click on a second tab and then come back, the control is malformed (missing buttons, not aligned, basically it looks like bad html).

If I remove the "RenderSelectedPageOnly" attribute or set it to false, then the FileExplorer control is always formed correctly.

I've also noticed this behavior with the RadFileEditor inside a dynamically loaded user control, but it is not as reproducable.

I am using the 2009.2.826.35 Telerik dll.

Anyone else seen this, or heard of this problem? I'm going to guess off the top of my head that maybe this is my fault caused by an unclosed tag someplace in my HTML(aspx page). But it seems odd that it would go away completely just by me changing one setting.

I also frequently have problems trying to view my pages through IE 8 without compatibility mode enabled. It's kind of sad really... any suggestions on where to go for tips on how to make this work?

Thanks

[Lini]

Hi,

Please open a formal support ticket and send us a page or a project we can use to reproduce the problem.
I was not able to reproduce it using a simple page. Here is my code:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <telerik:RadTabStrip ID="tabstrip1" runat="server" SelectedIndex="0" MultiPageID="multipage1" AutoPostBack="true">
        <Tabs>
            <telerik:RadTab Text="one">
            </telerik:RadTab>
            <telerik:RadTab Text="two">
            </telerik:RadTab>
            <telerik:RadTab Text="three">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="multipage1" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true">
        <telerik:RadPageView ID="pv1" runat="server">
                Page 1
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            <telerik:RadFileExplorer ID="rfe1" runat="server">
                <Configuration ViewPaths="~/" />
            </telerik:RadFileExplorer>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView3" runat="server">
            Page 3
        </telerik:RadPageView>
    </telerik:RadMultiPage>
</telerik:RadAjaxPanel>

All the best,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim Li]

Lini,

I tried your code. First, it asked for a scriptmanager. After I added it and ran it again, I got the following error:
 

Server Error in '/' Application.

---

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).] System.Web.UI.ControlCollection.AddAt(Int32 index, Control child) +8668018 Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +132 [HttpException (0x80004005): Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.] Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +180 Telerik.Web.UI.RadAjaxControl.PerformRender() +420 Telerik.Web.UI.RadAjaxControl.OnPageRender(HtmlTextWriter writer, Control page) +1243 Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +95 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +256 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.Page.Render(HtmlTextWriter writer) +29 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1266

Thanks for help.

Tim

[Lini]

Hello Tim,

The code I sent you does not contain any script blocks (<%...%>), so the problem is probably coming from some other part of the page. Try wrapping the pieces of javascript, where you have <%...%> with <telerik:RadCodeBlock> elements and see if it helps. For more information, see http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html

Greetings,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Martin Roussel]

Hi, I have a similar problem with my RadFileExplorer (using Q2 2012). My FileExplorer is in a User Control (that is in a RadTabStrip, that is a RadAjaxPanel). The width of the FileExplorer is set in the control markup (Width="100%"). Everything is fine until I go in another tab of the strip (that also contains a user control that itself contains a RadGrid) and do AJAX calls in order to modify/refresh that grid content. When I go back to the Explorer tab, the rightmost pane of the control (where file names and sizes are displayed) has lost is width setting (looks like the width is now about ~200px). The problem is partially fixed if I set the markup width to a fixed size (ex: Width="1000px")) but I would like to use percentages.

I want to set that width through CSS but seems I cant fin the right property (I can do it for the whole control but not its child panes)

Note that everything is working fine when both user controls (Grid and FileExplorer) are moved outside of RadTabStrip and are on same page... or if I dont specify any width setting for the FileExplorer (but width is not using all available space in that case).

RadTabStrip and RadMultiPage inside RadAjaxPanel Pane

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Visible="false" Skin="WebBlue" EnableDragToReorder="true" MultiPageID="RadMultiPag1" SelectedIndex="0"></telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPag1" runat="server" Visible="false" Style="width:99.7%;border:2px;border-color:red;border-style:solid;" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"></telerik:RadMultiPage>

User Control ascx

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue" />

                        <br />

                        <a id="FileExplorer1_Anchor"></a>

                        <div class="Container">

                             <div class="Header">

                             </div>

                            <telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Height="250px" Width="100%" >
                            </telerik:RadFileExplorer>

                        </div>

User Control cs

public partial class UserControl : PL.BaseInheritControlPL.BaseInheritControlPL
    {
        private RadAjaxManager manager = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            manager = RadAjaxManager.GetCurrent(Page);
            manager.AjaxSettings.AddAjaxSetting(manager, RadFileExplorer1, RadAjaxLoadingPanel1);


        }
}

Ive attached a screenshot of the issue.

[Vessy]

Hi Martin,

Most probably the experienced issue is caused by the fact that by design the FileExplorer does not support size in percentages. This is because the FileExplorer wraps plenty of child controls that relies on fixed size which need to be re-calculated (especially when the control has been customized - e.g. custom columns in the grid).

This behavior can be workarounded by calling the Splitter's Repaint() method, when the FileExplorer is resized. For your convenience I prepared a sample page, demonstrating how the FileExplore could be resized on a window width change. You could apply a similar approach in your project to handle the TabStrip's OnClientTabSelected() event to make the FileExplorer recalculate its width.
 
Additionally, you have written that your FileExplorer is wrapped inside a RadAjaxPanel. Please, note that FileExplorer's functionality is heavily based on client-side callbacks and it is highly not recommended to be externally ajaxified. That also could be a possible reason for the issue.

Regards,
Vesi
the Telerik team

[Martin Roussel]

Thanks Vesi,

Repaint() seems to be way to go. However, I dont know how to access a user control's inner javascript function (OnClientLoad()) from its parent container (TabStrip's OnClientTabSelected()). Can you help on this?

TIA

[Kate]

Hi TIA,

You can directly access the user control by its id. Please take a look at the attached simplified runnable project as well as the following article where it is explained in details how the name of the controls changes when using a custom user control or any other naming container - Control ID Naming in Content Pages.

Regards,
Kate
the Telerik team

[KVEE]

Hi Telerik team,

I'm researching a problem and run into this thread which I also had a problem with and it's reproducible.  So I have 2 problems that I need to resolve rather quickly:

1) I'm getting a javascript error running the code previously provided by your team member Lini back on 10/8/2009.  The page displays the 3 tabs.  When I tab through tab 1, 2, 3 then back to 2, I get an error:

Microsoft JScript runtime error: Unable to get value of the property 'get_id': object is null or undefined 
in the script file Telerik.Web.UI.WebResource_3.axd on line 
if(e&&(e.id==this.get_postbackButton()||e.id==this.get_tree().get_id())){this._showLoadingPanel(this.get_treePane().get_id());

I'm using Telerik 2011.3.1115.35.  I'm surprised this was not caught by anyone.

2) If I move the FileExplorer into a web control ascx and include it in tab 2 instead of inline code as in the sample and add a javascript function for file preview purpose, when I tab to tab 2, I'm getting a javascript error

Microsoft JScript runtime error: 'OnExplorerFileOpen' is undefined
in a script block [dynamic] file on line
$create(Telerik.Web.UI.RadFileExplorer, {"_commandArgumentInputID": .............................

Here's the entire code for the web control:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script type="text/javascript" id="telerikClientEvents1">
//<![CDATA[
    function OnExplorerFileOpen(oExplorer, args) {
        //alert("OnExplorerFileOpen");
        if (!args.get_item().isDirectory()) {
            setTimeout(function () {
                var oWindowManager = oExplorer.get_windowManager();
                var previewWinow = oWindowManager.getActiveWindow(); // Gets the current active widow.
                if (previewWinow != null) {
                    previewWinow.setSize(800, 500); // resize the window
                    //Possible values are None, Resize, Minimize, Close, Pin, Maximize, Move, Reload, Default
                    previewWinow.set_behaviors(Telerik.Web.UI.WindowBehaviors.Resize + Telerik.Web.UI.WindowBehaviors.Minimize + Telerik.Web.UI.WindowBehaviors.Maximize + Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Reload)
                    //previewWinow.maximize(); //alternatively, maximize it. You can use its entire API
                }
            }, 100);    // Some timeout is required in order to allow the window to become active
        }
    }

//]]>
</script>

<telerik:RadFileExplorer ID="rfe1" runat="server" OnClientFileOpen="OnExplorerFileOpen">
                <Configuration ViewPaths="~/" />
            </telerik:RadFileExplorer>

[Dobromir]

Hi Kristina,

Straight to the issues:

1. We are aware of similar issue with the previous versions of RadControls for ASP.NET AJAX that was fixed some time ago. Could you please try to upgrade to the latest version and see if the problem still occurs?
2. The error that you experience is quite odd, it seems that the RadFileExplorer is trying to initialize before the OnExplorerFileOpen is initialize. I tried to reproduce this behaviour but to no avail. Could you please open formal support ticket and send a sample fully runnable project reproducing the issue so we can examine and debug it locally?

Regards,
Dobromir
Telerik