Highlighting selected Menu from javascript

[David]

Hi,

  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

[Boyan Dimitrov]

Hello,

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

 

 

[David]

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

[David]

Boyan? Any solutions?

[Boyan Dimitrov]

Hello,

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

 

 

[David]

Boyan, seems we are going into right direction. Your code was able to clean the original selection and set clicked selection. However, when i clicked on the page outside of menu i loose backcolor of selection ( see Capture2.png).

Thank you

[David]

Boyan? Any thoughts?

[Boyan Dimitrov]

Hello,

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>

//code behind

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadMenu2.FindItemByText("PDF").HighlightPath();
        }
    }

Regards,
Boyan Dimitrov
Telerik

 

 

[David]

Hi Boyan, I am having same problem with your code. When i click on the page outside of menu i loose backcolor of selection ( see Capture.png).

[Boyan Dimitrov]

Hello,

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

 

 

[David]

Boyan,

    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
   
  

[Boyan Dimitrov]

Hello,

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