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

Content loads on every other opening of slidingpane

10 Answers 129 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dave Miller
Top achievements
Rank 2
Dave Miller asked on 06 Apr 2009, 10:53 PM
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

10 Answers, 1 is accepted

Sort by
0
Dave Miller
Top achievements
Rank 2
answered on 07 Apr 2009, 05:45 PM
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
0
Accepted
Tsvetie
Telerik team
answered on 09 Apr 2009, 08:18 AM
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> 
                    <class="postfoot"
                        posted by: <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=0length=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.
0
Dave Miller
Top achievements
Rank 2
answered on 09 Apr 2009, 04:33 PM
Tsvetie,

Thank you - that corrected the problem.

Best regards,
Dave
0
Mike
Top achievements
Rank 1
answered on 09 Apr 2009, 05:26 PM
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]
0
Tsvetie
Telerik team
answered on 10 Apr 2009, 01:07 PM
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.
0
Mike
Top achievements
Rank 1
answered on 10 Apr 2009, 02:24 PM
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.

0
Mark
Top achievements
Rank 2
answered on 24 Apr 2009, 02:45 PM
GREAT!  Thanks for this, worked like a charm.  I assume this will be addressed in the next version?
0
Svetlina Anati
Telerik team
answered on 24 Apr 2009, 03:00 PM
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.
0
Jonathan Levy
Top achievements
Rank 1
answered on 07 Apr 2010, 03:40 PM
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?
0
Svetlina Anati
Telerik team
answered on 12 Apr 2010, 12:24 PM
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.
Tags
Splitter
Asked by
Dave Miller
Top achievements
Rank 2
Answers by
Dave Miller
Top achievements
Rank 2
Tsvetie
Telerik team
Mike
Top achievements
Rank 1
Mark
Top achievements
Rank 2
Svetlina Anati
Telerik team
Jonathan Levy
Top achievements
Rank 1
Share this question
or