Close open items when returning to home page

[Clive Hoggar]

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

[Kate]

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

[Clive Hoggar]

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

[Plamen]

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

[Clive Hoggar]

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

[Plamen]

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

[Clive Hoggar]

Thanks a million! 

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

Clive