Highlighting selected Menu from javascript

12 posts, 0 answers
  1. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 15 Sep 2014 Link to this post

    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
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Sep 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 18 Sep 2014 in reply to Boyan Dimitrov Link to this post

    Boyan, thank you for response.
    However your case have the same problem, meaning it makes both items selected (look at the picture).
    Thank you
  5. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 22 Sep 2014 Link to this post

    Boyan? Any solutions?
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Sep 2014 Link to this post

    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.

     
  7. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 23 Sep 2014 in reply to Boyan Dimitrov Link to this post

    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
  8. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 25 Sep 2014 Link to this post

    Boyan? Any thoughts?
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Sep 2014 Link to this post

    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.

     
  10. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 29 Sep 2014 in reply to Boyan Dimitrov Link to this post

    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).
  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Oct 2014 Link to this post

    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.

     
  12. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 02 Oct 2014 Link to this post

    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
       
      
  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Oct 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017