Content loads on every other opening of slidingpane

[Dave Miller]

After updating to 2009_1_402 I have a radslidingpane that only loads the content on every other opening. When it dos'nt add the content it just has the title bar that expands out. 

If you resize it once the pane is opened, either with or without the content loaded, it does the same thing adding and removing the content on every other resize.

Any Ideas?

Thanks,
Dave

[Dave Miller]

I have been trying to find a way to fix this to no avail but I did find the same error happenning in one of the demos to show you what I mean.

Please look at the example at:

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_firstlook/defaultcs.aspx

If you click to open any of the tabs on the right you will see what I mean. 

For example if you click on "Pane1 to open it, click on it again to close it and then click it to open it again it has no content.

If you keep clicking, it rotates between the content loading and then not.

Thanks,
Dave

[Tsvetie]

Hello Dave,
I was able to reproduce the problem and forwarded it to our developers. It is caused by the SlideDirection=Left setting. For the time being, you can use the following workaround - just place the below script block on the page, holding the RadSplitter:

<script type="text/javascript">
        Telerik.Web.UI.RadSlidingPane.prototype._setSlidingContainerSize = function(width, height)
        {
            var zone = this._zone;
            var isVerticalSlideDirection = zone._isVerticalSlide();
            var tabsContainer = zone.getTabsContainer();
            var parentRelativeTo = ($telerik.isIE || !$telerik.getVisible(tabsContainer)) ? this.get_pane() : zone.getTabsContainer();

            if (width == null)
                width = (!isVerticalSlideDirection) ? this.get_width() : parentRelativeTo.offsetWidth;
            if (height == null)
                height = (isVerticalSlideDirection) ? this.get_height() : parentRelativeTo.offsetHeight;

            var contentElement = this._contentElement;
            if ($telerik.isSafari)
            {
                contentElement.style.width = width + "px";
                contentElement.style.height = height + "px";
            }

            var popupElement = this._popupElement;
            if (parseInt(popupElement.style.width) != width)
                popupElement.style.width = width + "px";
            if (parseInt(popupElement.style.height) != height)
                popupElement.style.height = height + "px";

            var resizeElement = this._resizeElement;
            var enableResize = this.get_enableResize();

            var contentHeight = height;
            if (enableResize && isVerticalSlideDirection)
                contentHeight -= (resizeElement.offsetHeight);

            var titleContainerParent = $telerik.getElementByClassName(this._tableElement, 'rspSlideHeader', 'tr');
            if (titleContainerParent)
            {
                var titleContainer;
                var tds = titleContainerParent.getElementsByTagName("td");
                for(var i=0, length=tds.length; i<length; i++)
                {
                    var td = tds[i];
                    if(td.className != "rspSlideContainerResize")
                    {
                        titleContainer = td;
                        break;
                    }
                }

                if (titleContainer)
                    contentHeight -= titleContainer.offsetHeight;
            }

            var borderBox = $telerik.getBorderBox(contentElement);
            var paddingBox = $telerik.getPaddingBox(contentElement);
            var marginBox = $telerik.getMarginBox(contentElement);
            contentHeight -= (borderBox.vertical + paddingBox.vertical + marginBox.vertical);
            if (parseInt(contentElement.style.height) != contentHeight && contentHeight >= 0)
                contentElement.style.height = contentHeight + "px";

            var contentWidth = width;
            if (enableResize && ($telerik.getCurrentStyle(resizeElement, 'display', '') != 'none') && !isVerticalSlideDirection)
            {
                var resizeElementWidth = resizeElement.offsetWidth;
                if ($telerik.isIE6)
                {
                    resizeElementWidth = resizeElement.firstChild.offsetWidth;
                    resizeElementWidth += $telerik.getBorderBox(resizeElement).horizontal;
                }

                contentWidth -= resizeElementWidth;
            }
            contentWidth -= (borderBox.horizontal + paddingBox.horizontal + marginBox.horizontal);
            if (parseInt(contentElement.style.width) != contentWidth && contentWidth >= 0)
                contentElement.style.width = contentWidth + "px";

            this._isInitialSizeApplied = true;
        };
        </script>

For example, the First Look example of the RadSlidingPane should look like this:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="700" Height="500">
   <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">
        <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">
            <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150px">
                Pane 1 Content
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150px">
                Pane 2 Content
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150px">
                Pane 3 Content
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
    <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
        <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="Radpane1" runat="server" Height="22px" Scrolling="none">
                <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22px" SlideDirection="Bottom">
                    <telerik:RadSlidingPane ID="Radslidingpane4" Title="Pane1" runat="server" Height="150px">
                        Pane1</telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane8" Title="Pane2" runat="server" Height="150px">
                        Pane2</telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane9" Title="Pane3" runat="server" Height="150px">
                        Pane3</telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="Radpane2" runat="server">
                <div style="padding: 5px">
                    <h2>
                        RadEditor... on msdn2.microsoft.com
                    </h2>
                    <p>
                        It has been some time this was in the making... and as of the beginning of this
                        week RadEditor is the editor one uses to submit community content in MSDN. Here
                        is a hasty screenshot I made for you:<br />
                        <br />
                        <img src="http://blogs.telerik.com/Photos/Storage/peykov/MSDN_RadEditor.jpg" /><br />
                        <br />
                        To my best knowledge, this is the fifth Microsoft team that adopts the RadEditor,
                        yet I believe it is the first team to use it on a public Microsoft site (besides,
                        such an important one). The other teams using the editor are doing internal MS content,
                        and since I have not explicitly asked for permission to list their names here, I
                        will refrain from doing that, however tempted I feel.
                        <br />
                        <br />
                        While this is certainly a good proof of RadEditor's qualities, and of Telerik products
                        in a broader sense, it is also a challenge to live up to the expectations. And even
                        if you won't jump yet on the <strong>msdn</strong> site to submit your community
                        posts, it is still you - the Telerik community - who will benefit from the fact
                        the editor is there. Now we will need to address reported problems even faster than
                        before :)
                    </p>
                    <p class="postfoot">
                        posted by: <a href="http://blogs.telerik.com/TervelPeykov/Posts.aspx" id="ctl00_MainContentPlaceHolder_BlogPosts1_ctl00_ctl00_postedBy">
                            Tervel Peykov</a>
                    </p>
                </div>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
    <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
        <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" ClickToOpen="true"
            SlideDirection="Left">
            <telerik:RadSlidingPane ID="Radslidingpane5" Title="Pane1" runat="server" Width="150px">
                Pane 1 Content
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="Radslidingpane6" Title="Pane2" runat="server" Width="150px">
                Pane 2 Content
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="Radslidingpane7" Title="Pane3" runat="server" Width="150px">
                Pane 3 Content
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>
 <script type="text/javascript">
Telerik.Web.UI.RadSlidingPane.prototype._setSlidingContainerSize = function(width, height)
{
    var zone = this._zone;
    var isVerticalSlideDirection = zone._isVerticalSlide();
    var tabsContainer = zone.getTabsContainer();
    var parentRelativeTo = ($telerik.isIE || !$telerik.getVisible(tabsContainer)) ? this.get_pane() : zone.getTabsContainer();

    if (width == null)
        width = (!isVerticalSlideDirection) ? this.get_width() : parentRelativeTo.offsetWidth;
    if (height == null)
        height = (isVerticalSlideDirection) ? this.get_height() : parentRelativeTo.offsetHeight;

    var contentElement = this._contentElement;
    if ($telerik.isSafari)
    {
        contentElement.style.width = width + "px";
        contentElement.style.height = height + "px";
    }

    var popupElement = this._popupElement;
    if (parseInt(popupElement.style.width) != width)
        popupElement.style.width = width + "px";
    if (parseInt(popupElement.style.height) != height)
        popupElement.style.height = height + "px";

    var resizeElement = this._resizeElement;
    var enableResize = this.get_enableResize();

    var contentHeight = height;
    if (enableResize && isVerticalSlideDirection)
        contentHeight -= (resizeElement.offsetHeight);

    var titleContainerParent = $telerik.getElementByClassName(this._tableElement, 'rspSlideHeader', 'tr');
    if (titleContainerParent)
    {
        var titleContainer;
        var tds = titleContainerParent.getElementsByTagName("td");
        for(var i=0, length=tds.length; i<length; i++)
        {
            var td = tds[i];
            if(td.className != "rspSlideContainerResize")
            {
                titleContainer = td;
                break;
            }
        }

        if (titleContainer)
            contentHeight -= titleContainer.offsetHeight;
    }

    var borderBox = $telerik.getBorderBox(contentElement);
    var paddingBox = $telerik.getPaddingBox(contentElement);
    var marginBox = $telerik.getMarginBox(contentElement);
    contentHeight -= (borderBox.vertical + paddingBox.vertical + marginBox.vertical);
    if (parseInt(contentElement.style.height) != contentHeight && contentHeight >= 0)
        contentElement.style.height = contentHeight + "px";

    var contentWidth = width;
    if (enableResize && ($telerik.getCurrentStyle(resizeElement, 'display', '') != 'none') && !isVerticalSlideDirection)
    {
        var resizeElementresizeElementWidth = resizeElement.offsetWidth;
        if ($telerik.isIE6)
        {
            resizeElementresizeElementWidth = resizeElement.firstChild.offsetWidth;
            resizeElementWidth += $telerik.getBorderBox(resizeElement).horizontal;
        }

        contentWidth -= resizeElementWidth;
    }
    contentWidth -= (borderBox.horizontal + paddingBox.horizontal + marginBox.horizontal);
    if (parseInt(contentElement.style.width) != contentWidth && contentWidth >= 0)
        contentElement.style.width = contentWidth + "px";

    this._isInitialSizeApplied = true;
};
</script>

Alternatively, in case this is an option, you can set EnableResize=False for your RadSlidingPanes:

<telerik:RadSlidingPane ID="Radslidingpane5" Title="Pane1" runat="server" Width="150px"
    EnableResize="false">

I have updated your Telerik points for bringing the issue to our attention.

All the best,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Dave Miller]

Tsvetie,

Thank you - that corrected the problem.

Best regards,
Dave

[Mike]

FYI - I noticed a similar problem with the example at: http://demos.telerik.com/aspnet-ajax/splitter/examples/default/defaultcs.aspx

I implemented it with the ASP.NET Ajax Q1 2009 release and saw the same issue in IE8. 

Running the example with IE7 and FireFox things work as expected.

Mike McIntyre [MVP]

[Tsvetie]

Hi Mike,
I am not quite sure what you mean. Could you please explain in detail the problem you have, how you reproduce it with the example you refer to and whether the fix worked for you as well?

All the best,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Mike]

The problem is that after I implemented the example (http://demos.telerik.com/aspnet-ajax/splitter/examples/default/defaultcs.aspx) and viewed it in IE8, the sliding pane content is shown ever other time I open a sliding pane. When the content is not shown, the sliding pane title bar is shown and the content under where the sliding pane content should be shows through. Click to see screen shots -> Issue

When viewed in FF 2.0, the example did not have the issue.

The JavaScript you provided eliminated the issue when the example is viewed in IE 8.

To reproduce, implement the example in a Visual Studio 2008 C# ASP.NET web project then view with IE8.

[Mark]

GREAT!  Thanks for this, worked like a charm.  I assume this will be addressed in the next version?

[Svetlina Anati]

Hello guys,


Yes, we confirm that the issue will be fixed in our next build - the upcoming SP of the RadControls for ASP.NET AJAX.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jonathan Levy]

Can I just ask if this has actually been fixed. Silly question but I just want to confirm it. Also which version has it been fixed since?

[Svetlina Anati]

Hello Jonathan,

The issue was fixed in the next release as promised in this thread - Q1 2009 SP2, namely version 2009.1.527. The fix is also available in all later releases.


Greetings,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.