Close open items when returning to home page

7 posts, 0 answers
  1. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 01 Aug 2012 Link to this post

    Hi

    I am using PanelBar as a 2-level menu, and have set ExpandMode="SingleExpandedItem"  PersistStateInCookie="True" and this works as expected.

    However, I would like to have the open item close when the user clicks another top level menu item even if the clicked item does NOT have any child items in it. 

    How can I achieve this behaviour?  Can someone help with this?  

    I need to achieve this because I realize after user testing that it is the user expectation!

    Thanks

    Clive
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Aug 2012 Link to this post

    Hi Clive,

    One approach that I can think of is to use the client-side OnClientItemClicking event of the RadPanelBar and on a click of an item containg no child items check if there are any expanded items and if so, use the collapse() property of the item to collapse them.

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 08 Aug 2012 Link to this post

    Thanks Kate,

    My Javascript skills are not great, and my chances of getting the syntax right are low!
    Could you give me an example to customise?

    Thanks  a lot!

    I also tried using the server side event, but no joy; can this approach work?
    Protected Sub RadPanelBar1_ItemClick(sender As Object, e As Telerik.Web.UI.RadPanelBarEventArgs) Handles RadPanelBar1.ItemClick
            If e.Item.Items.Count = 0 Then
                For Each item As RadPanelItem In RadPanelBar1.GetAllItems()
                    If item.Items.Count > 0 Then
                        item.Expanded = False
                    End If
                Next
     
            End If
        End Sub

    Thanks

    Clive
  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 13 Aug 2012 Link to this post

    Hi Clive,

     
    Here is the code that worked at my side:

    <script type="text/javascript">
           function OnClientItemClicking(sender, args) {
                  if (args.get_item().get_items().get_count() == 0) {
                      for (var i = 0; i < sender.get_items().get_count(); i++) {
                          if (sender.get_items().getItem(i).get_expanded()) {
                              sender.get_items().getItem(i).collapse();
                          }
                      }
                  }
              }
          </script>
          <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="300px" ExpandMode="SingleExpandedItem"
              OnClientItemClicking="OnClientItemClicking" PersistStateInCookie="True">

    Hope this will be helpful.

    Greetings,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 13 Aug 2012 Link to this post

    Hi

    Thanks. This does work but it also closes the expanded items when I click a child item, which then acts like the state is not retained in a cookie. So I added another condition as below, but it seems it only works in the specific case of Chrome browser on my local machine, so I assume I am doing something wrong? 

    <script type="text/javascript">
            function OnClientItemClicking(sender, args) {
                if ((args.get_item().get_items().get_count() == 0) && (args.get_item.getItems.rootItem())) {
                    for (var i = 0; i < sender.get_items().get_count(); i++) {
                        if (sender.get_items().getItem(i).get_expanded()) {
                            sender.get_items().getItem(i).collapse();
                        }
                    }
                }
            }
          </script>

    Chrome on Mac says rootItem is not recognised .  How should I make this so it only closes expanded items when the rootItem is empty?

    Thanks

    Clive



  7. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 15 Aug 2012 Link to this post

    Hi Clive,

     
    You can check the level of the item as in the code:

    function OnClientItemClicking(sender, args) {
                    if (args.get_item().get_items().get_count() == 0 && args.get_item().get_level()==0) {
     
                        for (var i = 0; i < sender.get_items().get_count(); i++) {
                            if (sender.get_items().getItem(i).get_expanded()) {
                                sender.get_items().getItem(i).collapse();
                            }
                        }
                    }
                }

    Hope this will help you solve the issue.

    All the best,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 21 Aug 2012 Link to this post

    Thanks a million! 

    It works now in Chrome, Firefox, Safari, and IE9

    Clive
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017