I am highlighting first menu item from codebehind by: RadMenu1.Items(0).HighlightPath(). That works as expected.
However, when i am trying to do the same from Javascript i struggle.
I tried:
function RadMenu1_OnClientItemClicking(sender, eventArgs) {
var item = eventArgs.get_item();
item.set_selected(true)
This results in both menu items highlighted. Additional problem that when i click outside menu, second item of menu looses it highlight state, but first item stays highlighted.
Another way i tried
var menu = $find("<%= RadMenu1.ClientID %>");
var firstItem = menu.get_items().getItem(0).set_selected(true);
var secondItem = menu.get_items().getItem(1).set_selected(false);
menu.commitChanges();
Kinda same issues.
Please advice
11 Answers, 1 is accepted
I tested the described scenario but everything works fine at my side. Could you please test the attached page and let me know if I am missing something in order to replicate the issue? On Page_Load one of the items and its corresponding parent items are selected (this is what HighlightPath() does).
Regards,
Boyan Dimitrov
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.

However your case have the same problem, meaning it makes both items selected (look at the picture).
Thank you

Please try to add the highlighted line to the OnClientItemClicking function as shown below:
//JavaScript
function
OnClientItemClicking(sender, args) {
var
item = args.get_item();
$telerik.$(
".rmFocused"
).removeClass(
"rmFocused"
);
item.set_selected(
true
)
}
Regards,
Boyan Dimitrov
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.

Thank you

I am afraid that I was not able to replicate any such issue. Could you please try to test the provided code snippet and let us know how that worked.
//markup code
<
script
type
=
"text/javascript"
>
function OnClientItemClicking(sender, args) {
var item = args.get_item();
$telerik.$(".rmFocused").removeClass("rmFocused");
item.set_selected(true);
}
</
script
>
<
telerik:RadMenu
ID
=
"RadMenu2"
runat
=
"server"
Flow
=
"Vertical"
Width
=
"200"
OnClientItemClicking
=
"OnClientItemClicking"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Save As"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Word Document"
/>
<
telerik:RadMenuItem
Text
=
"Word Template"
/>
<
telerik:RadMenuItem
Text
=
"Adobe PDF"
/>
<
telerik:RadMenuItem
Text
=
"Other formats"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"PDF"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"Print"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Print"
/>
<
telerik:RadMenuItem
Text
=
"Quick Print"
/>
<
telerik:RadMenuItem
Text
=
"Print Preview"
/>
</
Items
>
</
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
RadMenu2.FindItemByText(
"PDF"
).HighlightPath();
}
}
Regards,
Boyan Dimitrov
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.

In order to avoid any confusions I would like to clarify that actually the background color is applied when the menu item is in focused state. The selected state for Silk skin is actually without the blue background color. You can test the skin states at any of RadMenu demos.
The reason why the background color disappears after clicking outside the RadMenu is because the menu item stops being focused.
Regards,
Boyan Dimitrov
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.

Seems highlight set from code behind on page load messes up with future javascript selection logic.
I had to replace 'RadMenu1.Items(0).HighlightPath()' with 'RadMenu1.Items(0).Selected = True'
This solves the issue, while not ideal.
Please let me know if you have better idea
Indeed setting RadMenu1.Items(0).Selected = True will be consistent with the JavaScript selection logic and basic selection with the mouse click. I would suggest using this approach for your case.
Regards,
Boyan Dimitrov
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.