Content loads on every other opening of slidingpane

11 posts, 1 answers
  1. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 06 Apr 2009 Link to this post

    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
  2. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 07 Apr 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 09 Apr 2009 Link to this post

    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.
  5. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 09 Apr 2009 Link to this post

    Tsvetie,

    Thank you - that corrected the problem.

    Best regards,
    Dave
  6. Mike
    Mike avatar
    6 posts
    Member since:
    Jun 2012

    Posted 09 Apr 2009 Link to this post

    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]
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 10 Apr 2009 Link to this post

    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.
  8. Mike
    Mike avatar
    6 posts
    Member since:
    Jun 2012

    Posted 10 Apr 2009 Link to this post

    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.

  9. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 24 Apr 2009 Link to this post

    GREAT!  Thanks for this, worked like a charm.  I assume this will be addressed in the next version?
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Apr 2009 Link to this post

    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.
  11. Jonathan Levy
    Jonathan Levy avatar
    56 posts
    Member since:
    Sep 2008

    Posted 07 Apr 2010 Link to this post

    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?
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 12 Apr 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017