Show selected (current) menu item

[Riia]

Hi,

We need to implement multi-level horizontal navigation for our site and it seemed that Telerik RadMenu whould be right choice for that. We can achieve almost exactly the look and feel wanted. Only thing missing is how to show selected (current) menu item. It seems that RadMenu or RadMenuItem does not have proper visual state for that?

What we need is to change color of one of the first level menu item at time (see example below, Test 1 should be selected if user clicked Test 11 or Test 12). Do you have any advice how to do that? 

<telerik1:RadMenu>
     <telerik1:RadMenuItem Header="Test 1">
         <telerik1:RadMenuItem Header="Test 11"/>
         <telerik1:RadMenuItem Header="Test 12"/>
    </telerik1:RadMenuItem>
     <telerik1:RadMenuItem Header="Test 2">
         <telerik1:RadMenuItem Header="Test 21"/>
         <telerik1:RadMenuItem Header="Test 22"/>
    </telerik1:RadMenuItem>
</telerik1:RadMenu>

Appreciate any help!

Best regards,
Riia

[Hristo]

Hello Riia,

RadMenu does not support the concept of selected item. That is why when you click on sub menu item all opened submenus are closed.

Kind regards,
Hristo
the Telerik team

[Riia]

Hi,

Thank you for your reply. Closing the submenu is fine. It is just the fact that we need to show the selected main level item. If RadMenu cannot be used for our case do you have any recommendations, is there another Telerik control we should look at? Or do we need to implement own custom control?

Best regards,
Riia

[Hristo]

Hi Riia,

I don't think we have such control. It may be possible to inherit from RadMenuItem, add new DependencyProperty IsCurrent, override ChangeVisualState method and call GoToState Current/NotCurrent state. You will have to change the visual states of TopLevelHeader template and add support for the new visual states.
On ItemClick at RadMenu you could set all root menu items IsCurrent to false and add some logic to select the root menu item (IsCurrent to True) whose sub item was clicked.

I hope that this will help you.

All the best,
Hristo
the Telerik team

[Felickz]

I also desire this functionality, i think it is very basic for a menu to show the user which item was selected. All of your samples use your RadMenu to simply act as a file/edit type of toolbar where yes they are click once and do some action and don't need to be reminded how that action started.  

You are forgetting about the scenario of using the menu as some tool to drive navigation of a region.  For example, in your sample viewer when you click a source code file on the left verticle menu(or treeview whatever it may be) and then you move focus to the actual code, the file you selected does not remain highlighted.  How am i supposed to remember which code file i am in?

Do you have any sample code available to show exactly what you are trying to describe with your DependencyProperty sample above? 

What does it take to get this type of feature baked into the RadMenu Control, a simple property like RemainSelected = true could drive this and you could access your private settable properties to keep IsCurrent set.

[Hristo]

Hi Chad,

We have added property IsCurrent to RadMenuItem. However when all popups (of RadMenu) are closed all IsCurrent values are set to False.
You could use this property with ViewModel and bind it using TwoWay binding. When menu is opened you could manually set the viewmodel properties for currency to true so that RadMenuItem become current.
When RadMenuItem become current it will not open its submenu but you could use keyboard to open it.

I hope that this will help you.

All the best,
Hristo
the Telerik team