RadPane Scrollbar Display Issues

2 posts, 0 answers
  1. Geoff
    Geoff avatar
    21 posts
    Member since:
    Jun 2010

    Posted 09 Feb 2012 Link to this post

    Hello,

    I have a RadSplitter with two RadPanes, the left pane contains a RadTabStrip and RadMultiPage objects, with RadGrids inside the RadPageViews. The splitter is set to scroll vertically, but when a grid nested view is expanded (causing the content of the pane to be larger than its height), the pane is resized to allow scrolling but the scrollbar does not appear. White space appears in its place instead. However, when I mouse over another part of the page, the scrollbar magically appears. I also noted that when I collapsed the nested view, the existing scrollbar still remains as disabled until I mouse over another part of the page. Then it disappears.

    I've attached some screenshots to help illustrate my issue.

    1. Initial.jpg - How the page looks before expanding the second item
    2. AfterExpand.jpg - After expanding the second item. Note how the content is now too large and gets cut off at the bottom of the left pane. Also note the width of the content of the pane has been narrowed slightly and now shows a white space where the vertical scrollbar should be.
    3. AfterMouseOver.jpg - After moving the cursor away from the splitter, note the scrollbar now displays as expected. No postback has occurred. (Alternatively, the scrollbar also shows after using keystroke Ctrl + A to select all of the content on the page.)
    4. AfterCollapse.jpg - After collapsing the second item. Note how the scrollbar remains but disabled (since there is nothing to scroll). Also note how the content of the left pane is hidden behind the scrollbar. The expected result here would be that the scrollbar should disappear since there is no more scrolling.
    5. AfterMouseOver2.jpg - After moving the cursor away from the splitter, note the scrollbar has now disappeared, as expected. Again, no postback has occurred.

    Here is an example of the markup I've used. I removed the markup from the other tabs and from the right RadPane for brevity:

    <div style="width:100%; height:94%">
        <telerik:RadSplitter ID="rsAppraisalDetail" runat="server" Width="100%" Height="100%" Orientation="Vertical" VisibleDuringInit="False"
            OnClientLoaded="rsAppraisalDetail_Loaded">
            <telerik:RadPane ID="rpAppraisalDetailLeft" runat="server" scrolling="Y" Height="100%">
                <telerik:RadTabStrip ID="tsAppraisalDetail" runat="server" MultiPageID="mpAppraisalDetail" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab Text="<%$ Resources: GeneralInformation %>" PageViewID="pvGeneral" />
                        <telerik:RadTab Text="<%$ Resources: LandAndFeatures %>" PageViewID="pvLandFeatures" />
                        <telerik:RadTab Text="<%$ Resources: Buildings %>" PageViewID="pvBuildings" />
                        <telerik:RadTab Text="<%$ Resources: SalesHistory %>" PageViewID="pvSales" />
                        <telerik:RadTab Text="<%$ Resources: ExemptionsAndAssessment %>" PageViewID="pvExemptions" />
                        <telerik:RadTab Text="<%$ Resources: Notes %>" PageViewID="pvNotes" />
                    </Tabs>
                </telerik:RadTabStrip>
     
                <telerik:RadMultiPage ID="mpAppraisalDetail" runat="server" Width="100%" SelectedIndex="0" >
                    <telerik:RadPageView ID="pvGeneral" runat="server" CssClass="pageView">
                         
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pvLandFeatures" runat="server" CssClass="pageView">
                         
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pvBuildings" runat="server" CssClass="pageView">
                        <div>
                            <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblBuildings %>" /><br />
                            <telerik:RadGrid ID="dtgBuildings" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                Width="100%" OnNeedDataSource="dtgBuildings_NeedDataSource" OnPreRender="dtgBuildings_PreRender"
                                OnSelectedIndexChanged="dtgBuildings_SelectedIndexChanged">
                                <ClientSettings EnablePostBackOnRowClick="true">
                                    <Selecting AllowRowSelect="true" />
                                </ClientSettings>
                                <MasterTableView runat="server" DataKeyNames="Id" HierarchyLoadMode="Client" IsFilterItemExpanded="false">
                                <NestedViewTemplate>
                                        <telerik:RadGrid ID="dtgBuildingSections" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true"
                                            AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true"
                                            PageSize="5" Width="100%"
                                            OnNeedDataSource="dtgBuildingSections_NeedDataSource">
                                            <MasterTableView runat="server" DataKeyNames="Id" IsFilterItemExpanded="false">
                                                <Columns>
                                                    <telerik:GridBoundColumn UniqueName="YearBuilt" DataField="YearBuilt" HeaderText="<%$ Resources:RpaControlCaptions, lblYear %>"
                                                        DataType="System.Int16" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                                    <telerik:GridBoundColumn UniqueName="ImprovementModelDescr" DataField="ImprovementModelDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblStyle %>" />
                                                    <telerik:GridBoundColumn UniqueName="FramingClassDescr" DataField="FramingClassDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblClass %>" />
                                                    <telerik:GridBoundColumn UniqueName="ActualArea" DataField="ActualArea"  HeaderText="<%$ Resources:RpaControlCaptions, lblActualArea %>" 
                                                        DataType="System.Decimal" DataFormatString="{0:N0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                                    <telerik:GridBoundColumn UniqueName="PercentComplete" DataField="PercentComplete"  HeaderText="<%$ Resources:RpaControlCaptions, lblPercentComplete %>" 
                                                        DataType="System.Decimal" DataFormatString="{0:P0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                                </Columns>
                                            </MasterTableView>
                                        </telerik:RadGrid>
                                    </NestedViewTemplate>
                                    <Columns>
                                        <telerik:GridBoundColumn UniqueName="BuildingName" DataField="BuildingName" HeaderText="<%$ Resources:RpaControlCaptions, lblBuildingName %>" />
                                        <telerik:GridBoundColumn UniqueName="ImprovementTypeDescr" DataField="ImprovementTypeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblBuildingType %>" />
                                        <telerik:GridBoundColumn UniqueName="EffectiveYear" DataField="EffectiveYear" HeaderText="<%$ Resources:RpaControlCaptions, lblEffectiveYear %>"
                                            DataType="System.Int16" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
                                        <telerik:GridBoundColumn UniqueName="ActualArea" DataField="ActualArea" HeaderText="<%$ Resources:RpaControlCaptions, lblActualArea %>"
                                            DataType="System.Decimal" DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
                                        <telerik:GridBoundColumn UniqueName="FeatureCount" DataField="AttachedFeatures.Count" HeaderText="<%$ Resources:RpaControlCaptions, lblFeatures %>"
                                            DataType="System.Int32" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:N0}" />
                                        <telerik:GridBoundColumn UniqueName="FinalValue" DataField="FinalValue" HeaderText="<%$ Resources:RpaControlCaptions, lblValue %>"
                                            DataType="System.Decimal" DataFormatString="{0:C0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </div>
                        <asp:Panel runat="server" ID="pnlBuildingChildGrids">
                            <div style="padding-top:10px; margin-right: .5%; float:left; width:49.5%;">
                                <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblStructuralElements %>" /><br />
                                <telerik:RadGrid ID="dtgElements" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                    AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                    Width="100%" OnNeedDataSource="dtgElements_NeedDataSource">
                                    <MasterTableView runat="server" DataKeyNames="ElementCategoryDescr, ElementCodeDescr" IsFilterItemExpanded="false">
                                        <Columns>
                                            <telerik:GridBoundColumn UniqueName="ElementCategoryDescr" DataField="ElementCategoryDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCategory %>" />
                                            <telerik:GridBoundColumn UniqueName="ElementCodeDescr" DataField="ElementCodeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblDescription %>" />
                                            <telerik:GridBoundColumn UniqueName="Percent" DataField="Percent"  HeaderText="<%$ Resources:RpaControlCaptions, lblPercent %>" 
                                                DataType="System.Decimal" DataFormatString="{0:P0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </div>
                            <div style="padding-top:10px; margin-left: .5%; float:right; width:49.5%;">
                                <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblUnitCounts %>" /><br />
                                <telerik:RadGrid ID="dtgUnits" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                    AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                    Width="100%" OnNeedDataSource="dtgUnits_NeedDataSource">
                                    <MasterTableView runat="server" DataKeyNames="ElementCategoryDescr, ElementCodeDescr" IsFilterItemExpanded="false">
                                        <Columns>
                                            <telerik:GridBoundColumn UniqueName="ElementCategoryDescr" DataField="ElementCategoryDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCategory %>" />
                                            <telerik:GridBoundColumn UniqueName="ElementCodeDescr" DataField="ElementCodeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblDescription %>" />
                                            <telerik:GridBoundColumn UniqueName="UnitCount" DataField="UnitCount"  HeaderText="<%$ Resources:RpaControlCaptions, lblUnits %>" 
                                                DataType="System.Int32" DataFormatString="{0:N0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </div>
                            <div style="clear:both; padding-top:10px">
                                <asp:Label runat="server" Text="<%$ Resources: AttachedFeatures %>" /><br />
                                <telerik:RadGrid ID="dtgBuildingFeatures" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                    AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                    Width="100%" OnNeedDataSource="dtgBuildingFeatures_NeedDataSource">
                                    <MasterTableView runat="server" DataKeyNames="Id" IsFilterItemExpanded="false">
                                        <Columns>
                                            <telerik:GridBoundColumn UniqueName="CodeShortDescr" DataField="CodeShortDescr" HeaderText="<%$ Resources: FeatureName %>" />
                                            <telerik:GridBoundColumn UniqueName="Description" DataField="Description" HeaderText="<%$ Resources: FeatureDescription %>" />
                                            <telerik:GridBoundColumn UniqueName="QualityDescr" DataField="QualityDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblQuality %>" />
                                            <telerik:GridBoundColumn UniqueName="ConditionDescr" DataField="ConditionDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCond %>" />
                                            <telerik:GridBoundColumn UniqueName="EffYearBuilt" DataField="EffYearBuilt" HeaderText="<%$ Resources:RpaControlCaptions, lblYear %>"
                                                DataType="System.Int16" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                            <telerik:GridBoundColumn UniqueName="FinalValue" DataField="FinalValue" HeaderText="<%$ Resources:RpaControlCaptions, lblValue %>"
                                                DataType="System.Decimal" DataFormatString="{0:C0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </div>
                        </asp:Panel>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pvSales" runat="server" CssClass="pageView">
                         
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pvExemptions" runat="server" CssClass="pageView">
                         
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="pvNotes" runat="server" CssClass="pageView">
                         
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </telerik:RadPane>
            <telerik:RadPane ID="rpAppraisalDetailRight" runat="server" Height="100%" Width="22px" MinWidth="200" BackColor="#C2D0E0" Locked="True">
                               
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    Am I missing something in my markup? Or could it possibly be a bug in the control or maybe even IE? I am running IE 9.0.8112.16421

    Thanks!
    Geoff
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Feb 2012 Link to this post

    Hi Geoff,

    We are not aware of such problem and you are the first one to report it. I tried to reproduce the issue but to no avail. Since the provided markup is not runnable due to missing dependencies, I have tested a stripped down version of the markup trying to replicate the layout.

    Could you please modify the attached sample page to the point where the problem occurs and send it back? Or could you please open a formal support ticket and provide fully runnable sample project and / or a live URL reproducing the issue so we can examine and debug it locally?

    Kind regards,
    Dobromir
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top