Expanded Panelbar not working

8 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 09 Oct 2014 Link to this post

    Unsure of how to fix the problem we currently are experiencing.  While running the project locally the PanelBar is expanded like we instruct it however when we publish it to production it no longer is expanded.  We have currently set all Panel items to be expanded.

    I have included images to show what I am trying to accomplish (FullyExpanded).

    Here is the snippet of code to show what would be displayed in the images.
    <telerik:RadPane ID="Radpane12" runat="server" Scrolling="none">
        <telerik:RadSplitter ID="Radsplitter2" runat="server">
            <telerik:RadPane ID="Radpane1" runat="server" Width="300">
                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem" Width="300" PersistStateInCookie="True" Height="100%">
                    <Items>
                        <telerik:RadPanelItem Text="Reporting Tools" Expanded="True" ImageUrl="images/Reporting-icon.png">
                            <Items>
                                <telerik:RadPanelItem ImageUrl="images/folder-icon.png" Text="Static Reports" Expanded="true">
                                    <Items>
                                        <telerik:RadPanelItem ImageUrl="images/RT_FinStatement-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=financeStmt" Text="Financial Reports"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_CUTrack-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=cuTrack" Text="CU Tracking"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Audit-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=audit" Text="Auditing"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Underwrite-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=underwrite" Text="Underwriting"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Acct-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=accounting" Text="Accounting"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_PriBill-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=primaryBill" Text="Billing"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_PremRbt-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=premiumRebate" Text="Premium Rebates"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Marketing-icon.png" NavigateUrl="/Reports/StaticReports/ReportList.aspx?Show=marketing" Text="Marketing"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Employee-icon.png" NavigateUrl="/Reports/StaticReports/parameters.aspx?paramShow=33&reportName=Employee reports&reportFile=ASIUser_Reports.aspx&Show=users" Text="Employees"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem ImageUrl="images/folder-icon.png" Text="Policy Letters" Expanded="true">
                                    <Items>
                                        <telerik:RadPanelItem ImageUrl="images/RT_FinStatement-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=AsiPrimary" Text="ASI Primary"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_CUTrack-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=ASIExcess" Text="ASI Excess"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Audit-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=esiExcess" Text="ESI Excess"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Underwrite-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=esiFLExcess" Text="Florida Letters"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_Acct-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=esiTXExcess" Text="Texas Letters"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_PriBill-icon.png" NavigateUrl="/Reports/PolicyLetters/LetterList.aspx?Show=esiWAExcess" Text="Washington Letters"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem ImageUrl="images/folder-icon.png" Text="CU Data Bank" Expanded="true">
                                    <Items>
                                        <telerik:RadPanelItem ImageUrl="images/RT_CUDataBank-icon.png" NavigateUrl="/cuDataAnalysis/cuDSInd.aspx" Text="Individual CU Search"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem ImageUrl="images/RT_CUDataBank-icon.png" NavigateUrl="/cuDataAnalysis/CustomSearch.aspx" Text="CU Custom Search"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem ImageUrl="images/RT_Labels-icon.png" NavigateUrl="/Reports/Labels/LabelList.aspx" Text="Labels"></telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                    <ExpandAnimation Type="OutQuart" />
                    <CollapseAnimation Type="OutQuart" />
                </telerik:RadPanelBar>
            </telerik:RadPane>
            <telerik:RadPane ID="Radpane2" runat="server">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
  2. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 09 Oct 2014 in reply to Kurt Kluth Link to this post

    Just tested this problem does not occur within Chrome.  Tried clearing cache.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 10 Oct 2014 Link to this post

    Hi,

    I am not able to see the actual issue in the uploaded images as they appear one and the same, although one is called "fullyexpaned" and the other is called "notfullyexpanded". I have inspected the snippet provided and I noticed two things that may confuse you and result in behavior that you are not expecting.

    First, using a RadPanelBar with ExpandMode set to FullExpandedItem suggests that only one item is expanded at a time. You may check the RadPanelBar "Expanding and Collapsing Items" help article for further reference on that matter. If you would like to have all RadPanelBar items expanded at one and the same time, you should set ExpandMode to MultipleExpandedItems. You may test the ExpandMode options behavior on the Expand Behavior online demo.

    Second, if clearing the browser cached information have resolved the issue observed, it is most probably connected to the RadPanelBar property PersistStateInCookie, which is set to True in your case. In this case, all changes you have done, while interacting with the RadPanelBar, are kept in a cookie and the RadPanelBar would be loaded in the way that is stored in that cookie. Clearing the cached data would have deleted that cookie and you were able to observe behavior as expected.

    Upon testing your sample, I was able to observe that when the RadPanelBar is loaded initially, it has all items expanded - disregarding the FullExpandedItem specification as it is overriden by the hard-coded property Expanded="true". And when the page is refreshed, the RadPanelBar state is restored from the cookie, this time regarding the FullExpandedItem specification - only one item is expanded. Thus, following the ExpandMode specification and setting ExpandMode to MultipleExpandedItems would solve this misbehavior.

    If these tips do not help you solve the issue faced, could you elaborate a little further on your issue and scenario?

    Regards,
    Dimitar
    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. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 10 Oct 2014 in reply to Dimitar Link to this post

    Thank you for the response.  My apologies as I didn't realize the images were the same.  I have included an updated image of "Not Expanded". 

    First, we like the look of FullExpandedItem as we are working with a fixed height for our side navigation.  Having it set to MultipleExpandedItems will result in our navigation being to large.  This Telerik example was the inspiration for our site where the navigation is on the left and the content is updated in the middle. 

    Second, after removing PersistStateInCookie = True, it would result in losing it position within the menu when navigating to a page and would reset the menu to the home option.  We would like it to remain on the option that they clicked on.  Clearing the cache didn't seem to resolve the issue with the menu's being stuck in their current state.

    We would like to have only one "top level" (see image: Home, Financial Statements, CU Tracking, Reporting Tools, Check Mate, Administration, Favorites) at a time in a fixed height navigation area.  But have all the "2nd level" menu options to be fully expanded when they load the page (see image: Static Reports, Policy Letters, CU Data Bank all be expanded).  Right now it will only expand one at a time.  It is ok if these scroll because the top level is fixed.     

    I hope that it offers a bit more explanation of what we are trying to accomplish.   
  6. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 10 Oct 2014 in reply to Kurt Kluth Link to this post

    It did not attach the image.
  7. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 10 Oct 2014 in reply to Kurt Kluth Link to this post

    Receiving error when trying to upload file
  8. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 15 Oct 2014 Link to this post

    Are there any further suggestions in an attempt to resolve the issue that we are facing?
  9. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 16 Oct 2014 Link to this post

    Hello,

    From the provided information in this thread, the desired functionality is to have a RadPanelBar, which acts in FullExpandedItem mode for the root items and in MultipleExpandedItems mode for the child items, which should be also expanded upon expand of the root item. In addition to this the state of the control should be persisted in a cookie. I have prepared a sample page where the expand mode is set to Multiple, and the root items are manually closed when another one is expanded. This behavior will work correctly with the functionality which persist the state in a cookie.

    Regards,
    Dimitar Terziev
    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