User control content does not scroll with PanelBar

5 posts, 0 answers
  1. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 14 Jul 2014 Link to this post


    Hi,

    I have a user control inside a sliding pane.  The user control is a container for 5 other child user controls.  Each of the 5 user controls is a search criteria that I will have it expanded as default.  The problem I'm having is when they all expanded, the vertical scroll bar only has effect on the PanelBars but the content of each child user controls does not scroll.  I've been searching on the forum but couldn't find one that's similar to mine (I guess no one made the same mistake like I have).  Could you please tell me if I'm setting up something incorrectly with RadPanel? I have also attached a screen shot to show you the problem.

    This is the code of my page that has main search container:

    <telerik:RadPane ID="LeftPane" runat="server" Width="22px"  >
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Scrolling="None">
            <!-- Search Pane -->
            <telerik:RadSlidingPane ID="LeadSearchSlidePane" Title="Search Criteria" runat="server">
                 <uc1:LeadSearchCriteria runat="server" ID="LeadSearchCriteria" />
            </telerik:RadSlidingPane>
             <!-- Grid Pane -->
            <telerik:RadSlidingPane ID="GridListSlidePane" Title="Grid View" runat="server" Scrolling="None" OnClientExpanding="ExpandGridPane" OnClientDocked="ExpandGridPane" >
                 <uc2:LeadSearchGridView runat="server" ID="LeadSearchGridView" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>

    ascx for Search container user control :
    <style type="text/css">
        .searchpane {
            width:inherit;
            height:inherit;
            overflow:auto !important; /* with this line, the control will not adjust in the RadPane correctly */
        }
     
    </style>
     
     
    <div class="searchpane">
         
        <div>
            <telerik:RadButton ID="RadSearchButton" runat="server" Text="Search" OnClick="RadSearchButton_Click" />
            <telerik:RadButton ID="RadSaveSearchButton" runat="server" Text="Save"  />
        </div>
     
        <telerik:RadPanelBar ID="RadSearchPanelBar" runat="server" Width="100%"  Height="90%" ExpandMode="MultipleExpandedItems" >
            <Items>
                <telerik:RadPanelItem runat="server" Text="Date" Expanded="true"   >
                    <ContentTemplate>
                        <div style="position:inherit">
                        <uc1:CriteriaDate runat="server" ID="CriteriaDate"  />
                        </div>
                    </ContentTemplate>
                </telerik:RadPanelItem>   
                <telerik:RadPanelItem runat="server" Text="Company" Expanded="true" >
                    <ContentTemplate>
                        <uc2:CriteriaCompany runat="server" ID="CriteriaCompany" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Status" Expanded="true" >
                    <ContentTemplate>
                        <uc3:CriteriaStatus runat="server" ID="CriteriaStatus" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Activity Status" Expanded="true" >
                    <ContentTemplate>
                        <uc4:CriteriaActivityStatus runat="server" ID="CriteriaActivityStatus" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Saved Search" Expanded="true" >
                    <ContentTemplate>
                        <uc5:CriteriaSavedSearch runat="server" ID="CriteriaSavedSearch" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Dummy test panel" Expanded="true" >
                    <ContentTemplate>
                        <uc2:CriteriaCompany runat="server" ID="CriteriaCompany1" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
     
        </telerik:RadPanelBar>  
             
    </div>

    One of the search criteria user control (child):

    <style type="text/css">
        .companycriteria {
            width:inherit;
            height:inherit;
             
        }
    </style>
     
    <div class="companycriteria">
        <div style="float:right">
            <asp:CheckBox ID="IncludeDateInCriteriaCheckBox" Text="Include in search" runat="server" />
        </div>
        <div>
            <div><asp:Label ID="Label2" runat="server" Text="Company: " /><telerik:RadTextBox ID="RadCompanyTextBox" runat="server" /></div>
            <div><asp:Label ID="Label3" runat="server" Text="Provider: " /><asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div>
            <div><asp:Label ID="Label4" runat="server" Text="Contact: " /><telerik:RadTextBox ID="RadContactTextBox" runat="server" /></div>
            <div><asp:Label ID="Label5" runat="server" Text="Street: " /><telerik:RadTextBox ID="RadStreetTextBox" runat="server" /></div>
            <div><asp:Label ID="Label6" runat="server" Text="Zip: " /><telerik:RadTextBox ID="RadZipTextBox" runat="server" /></div>
            <div><asp:Label ID="Label7" runat="server" Text="Phone: " /><telerik:RadTextBox ID="RadPhoneTextBox" runat="server" /></div>
            <div><asp:Label ID="Label8" runat="server" Text="Agent: " /><telerik:RadTextBox ID="RadAgentTextBox" runat="server" /></div>
        </div>
    </div>

    Thank you in advance for taking the time to help me out.

    Helen
  2. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 15 Jul 2014 in reply to Helen Link to this post

    I sort of work around the problem by using regular asp.net controls instead of Telerik's controls.  Please let me know how I should resolve this problem with scrollbar correctly.  Thank you.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Jul 2014 Link to this post

    Hi Helen,

    We have tried to implement the code that you had provided, but the page looks in different way as in your screen shot. We are sending you this video as a part of the testing. We are also sending you the tested project in the attachment. Could you please modify it so the issue will be reproduce and send the modified version back to us in a support ticket? So we will be able to test it locally and could help you in more efficient way.

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

     
  5. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 17 Jul 2014 in reply to Magdalena Link to this post

    Magdalena,

    Thank you for showing me the video.  I feel confident that after I send you the sample, it'll come back to me working just like what you showed me =).  I'll create a sample and send it in a ticket.

    scrollbar problem in action video

    Thank you,

    Helen
  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Jul 2014 Link to this post

    Hello Helen,

    Thank you for getting back to us and for the provided video. We are looking forward to your reply with a sample project.

    Regards,
    Magdalena
    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
UI for ASP.NET Ajax is Ready for VS 2017