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

Highlighting selected Menu from javascript

11 Answers 59 Views
Menu
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Veteran
David asked on 15 Sep 2014, 08:58 PM
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

11 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 18 Sep 2014, 02:07 PM
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
 

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.

 
0
David
Top achievements
Rank 1
Veteran
answered on 18 Sep 2014, 06:34 PM
Boyan, thank you for response.
However your case have the same problem, meaning it makes both items selected (look at the picture).
Thank you
0
David
Top achievements
Rank 1
Veteran
answered on 22 Sep 2014, 02:29 PM
Boyan? Any solutions?
0
Boyan Dimitrov
Telerik team
answered on 23 Sep 2014, 11:09 AM
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
 

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.

 
0
David
Top achievements
Rank 1
Veteran
answered on 23 Sep 2014, 12:48 PM
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
0
David
Top achievements
Rank 1
Veteran
answered on 25 Sep 2014, 12:36 PM
Boyan? Any thoughts?
0
Boyan Dimitrov
Telerik team
answered on 26 Sep 2014, 11:40 AM
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
 

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.

 
0
David
Top achievements
Rank 1
Veteran
answered on 29 Sep 2014, 01:52 PM
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).
0
Boyan Dimitrov
Telerik team
answered on 01 Oct 2014, 04:02 PM
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
 

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.

 
0
David
Top achievements
Rank 1
Veteran
answered on 02 Oct 2014, 12:40 PM
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
   
  
0
Boyan Dimitrov
Telerik team
answered on 07 Oct 2014, 08:30 AM
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
 

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.

 
Tags
Menu
Asked by
David
Top achievements
Rank 1
Veteran
Answers by
Boyan Dimitrov
Telerik team
David
Top achievements
Rank 1
Veteran
Share this question
or