Splitter pane width free size calculation incorrect after update to 2014.1.403.45

4 posts, 0 answers
  1. Russell
    Russell avatar
    10 posts
    Member since:
    Jan 2007

    Posted 21 Apr 2014 Link to this post

    The width of a splitter pane is sometimes calculated as 0 when the splitter is inside a PageView that is inside a splitter and the Selected property of the PageView is being set in a server side event.

    Here is a demo of the error.  By clicking the Next Tab button it is changing the selected PageView.  RadPane7 and RadPane8 inside PV0 will end up with a width of 0.
    <%@ Page Language="VB" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Page.IsPostBack = False Then
                MultiPage.PageViews(0).Selected = True
            End If
        End Sub
         
        Protected Sub NextButton_Click(sender As Object, e As EventArgs) Handles NextButton.Click
            Dim TabIndex As Integer = 0
     
            If TabIndexLabel.Text = 0 Then
                TabIndex = 1
            End If
         
            TabIndexLabel.Text = TabIndex
            MultiPage.PageViews(TabIndex).Selected = True
        End Sub
    </script>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
             
            <asp:Label ID="TabIndexLabel" runat="server" Text="0" Visible="false"></asp:Label>
     
            <telerik:RadSplitter ID="RadSplitter1" runat="server">
                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="100px">
                    <asp:Button ID="NextButton" runat="server" Text="Next Tab" />
                </telerik:RadPane>
     
                <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                    <telerik:RadMultiPage ID="MultiPage" runat="server">
                        <telerik:RadPageView ID="PV0" runat="server">
                            <telerik:RadSplitter ID="Splitter0" runat="server">
                                <telerik:RadPane ID="RadPane7" runat="server">
                                </telerik:RadPane>
     
                                <telerik:RadPane ID="RadPane8" runat="server">
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPageView>
     
                        <telerik:RadPageView ID="PV1" runat="server">
                            <telerik:RadSplitter ID="Splitter1" runat="server">
                                <telerik:RadPane ID="RadPane13" runat="server">
                                </telerik:RadPane>
     
                                <telerik:RadPane ID="RadPane14" runat="server">
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </telerik:RadPane>
            </telerik:RadSplitter>
      </form>
    </body>
    </html>
  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 24 Apr 2014 Link to this post

    Hi Russell,

    By design each RadPane can contain not more than one nested Splitter, while the one holding the RadMultiPage in the provided code contains two Splitters (one Splitter in each PageView). In order for the Splitter to behave properly in such a scenario you need to set the RadMultiPage's RenderSelectedPageOnly property to True:
    <telerik:RadMultiPage ID="MultiPage" runat="server" RenderSelectedPageOnly="true">
        ...
    </telerik:RadMultiPage>

    In case you are using TabStrip in your real project, you will need to make sure that every tab switch is done via PostBack:
    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="MultiPage" AutoPostBack="true">
        <Tabs>
            ...
        </Tabs>
    </telerik:RadTabStrip>

    Please, give this suggestion a try and let me know how it goes.

    Regards,
    Vessy
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Russell
    Russell avatar
    10 posts
    Member since:
    Jan 2007

    Posted 24 Apr 2014 in reply to Vessy Link to this post

    It has been working for years.  I was able to get it working again by setting the width for any panes that did not have the width set.

    It trying to figure out what was causing the panes to not be rendered I created a test page with only the panes and tabs in it.  I have attached a picture of it.  RadPane can handle more than 1 nested splitter just fine and I am not using RenderSelectedPageOnly on the multipage.
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 29 Apr 2014 Link to this post

    Hi Russel,

    By setting fixed Width to each pane may cause the splitters to render 'correctly' but this is due to the fact that no calculations are needed during client-side initialization of the control.

    If ResizeWithParentPane property of a nested RadSplitter is set to false it will not be registered as one to the parent pane - this is the second possible approach for such scenario - i guess thats the case in your test page.

    More over, I am not quite sure how this scenario was working for you with previous versions, since this behaviour of RadSplitter has not been changed recently - RadPane can have only one nested splitter (splitter registered as a child of the pane) and this is the only splitter that is initialized during the page load, any additional splitter will not function at all.

    Regards,
    Dobromir
    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