This is a migrated thread and some comments may be shown as answers.

Close open items when returning to home page

6 Answers 28 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Clive Hoggar
Top achievements
Rank 1
Clive Hoggar asked on 01 Aug 2012, 07:59 PM
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

6 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 06 Aug 2012, 11:34 AM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 08 Aug 2012, 01:38 PM
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
0
Plamen
Telerik team
answered on 13 Aug 2012, 10:01 AM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 13 Aug 2012, 01:36 PM
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



0
Plamen
Telerik team
answered on 15 Aug 2012, 11:51 AM
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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 21 Aug 2012, 08:45 PM
Thanks a million! 

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

Clive
Tags
PanelBar
Asked by
Clive Hoggar
Top achievements
Rank 1
Answers by
Kate
Telerik team
Clive Hoggar
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or