How to get selection index of radmenu using javascript

9 posts, 2 answers
  1. Bharat
    Bharat avatar
    25 posts
    Member since:
    Jan 2014

    Posted 05 Jun 2014 Link to this post

    Hi

    I am adding a radmenu onto a page through class not through source. Now I want to access the value or selected index using javascript. I tried to accomplish this task by finding rad menu but its giving an exception that RadMenu with this id does not exists
    e.g
    $find("<%= RadMenu1.ClientID %>");

    I can not access this neither on page nor in any javascript file.

    Please let me know how to do this.

    Thank
    Bharat Bhushan
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jun 2014 in reply to Bharat Link to this post

    Hi Bharat,

    Please have look into the sample code snippet to access the SelectedItemIndex of a dynamically created Radmenu in OnClientClicked event of RadButton.

    ASPX:
    <telerik:RadButton ID="radbtnSelectedMenu" runat="server" Text="Get Index" AutoPostBack="false">
    </telerik:RadButton>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadMenu Menu = new RadMenu();
        Menu.ID = "RadMenu1";
        RadMenuItem item1 = new RadMenuItem();
        item1.Text = "Item1";
        RadMenuItem item2 = new RadMenuItem();
        item2.Text = "Item2";
        RadMenuItem item3 = new RadMenuItem();
        item3.Text = "Item2";
        Menu.Items.Add(item1);
        Menu.Items.Add(item2);
        Menu.Items.Add(item3);
        form1.Controls.Add(Menu);
        radbtnSelectedMenu.OnClientClicked = "GetSelectedItemIndex";
        radbtnSelectedMenu.Attributes.Add("MenuId", Menu.ClientID);
    }

    JavaScript:
    function GetSelectedItemIndex(sender, args) {
        var menu = document.getElementById(sender.get_id()).getAttribute("MenuId");
        var menuId = document.getElementById(menu);
        alert("Selected Item Index " + menuId.control._selectedItemIndex);
    }

    Let me know if you have any concern.
    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 09 Jun 2014 Link to this post

    Hi Bharat,

    You can obtain the reference to the client-side RadMenu object using the following JavaScript code:

    var menu = $find("<%= RadMenu1.ClientID %>");
    Attached you can find a very simple example.
    Please also check our help articles on Client-Side programming:

    Regards,
    Aneliya Petkova
    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.

     
  5. Bharat
    Bharat avatar
    25 posts
    Member since:
    Jan 2014

    Posted 09 Jun 2014 in reply to Aneliya Petkova Link to this post

    But the issue is that I am adding this dynamically not from design, So I am not able to find it neither from page nor from javascript
  6. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jun 2014 in reply to Bharat Link to this post

    Hi Bharat,

    It is not possible to directly access the dynamically created control in JavaScript. One approach is that you can pass the control id from the server side by using Attributes parameter and access it in JavaScript. In the above posted code I am passing the ID of  dynamically created RadMenu in OnClientClicked event of RadButton, and accessing it in JavaScript by using getAttribute method. Please elaborate your requirement if it doesn't help.

    C#:
    radbtnSelectedMenu.OnClientClicked = "GetSelectedItemIndex";
    //passing id of the dynamically created RadMenu 
    radbtnSelectedMenu.Attributes.Add("MenuId", Menu.ClientID);

    JavaScript:
    function GetSelectedItemIndex(sender, args) {
        //accessing id of the RadMenu
        var menu = document.getElementById(sender.get_id()).getAttribute("MenuId");
        var menuId = document.getElementById(menu);
    }

    Thanks,
    Princy.
  7. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 10 Jun 2014 Link to this post

    Hi Bharat,

    If you create a RadMenu dynamically, the easiest way to find the menu is to declare a public string MenuClientID in the code behind and to initialize that string with the menu.ClientID. Then you could find the menu on the client-side using the following JavaScript:
    var menu = $find("<%=MenuClientID%>");
    I modified the project I send you in the previous thread. Please check it and let me know if this is helpful.

    Regards,
    Aneliya Petkova
    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.

     
  8. Bharat
    Bharat avatar
    25 posts
    Member since:
    Jan 2014

    Posted 10 Jun 2014 in reply to Princy Link to this post

    Thanks for your support. Now I am able to get selectedindex, selectedvalue.
    Thanks once again
  9. A. Koster
    A. Koster avatar
    8 posts
    Member since:
    Oct 2006

    Posted 25 Jul 2014 Link to this post

    Hello,
          Can anyone help me out of my issue. I'm using tab key for index change in the Radmenu for that using below javascript and its working fine but for the last Radmenuitem its not getting hidie . so how can i want to change this code to getting hide???

    <script language="javascript" type="text/javascript">
    function OnClientItemFocus(sender, eventArgs) 
    {
    eventArgs.get_item().open();
    }
    </script>

    Thanks in Advance
    Regards
    Reshmaa Ramamurthy.
  10. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 29 Jul 2014 Link to this post

    Hi Alfred,

    You can use the following workaround to get the desired functionality of the RadMenu control:
    <script type="text/javascript">
        function OnClientItemFocus(sender, eventArgs) {
            eventArgs.get_item().open();
        }
        function OnClientItemBlurMenu(sender, args) {
            sender.close(true);
        }
    </script>

    Markup:
    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Classic" ClickToOpen="true" OnClientItemFocus="OnClientItemFocus" OnClientItemBlur="OnClientItemBlurMenu">
        <Items>
    ...


    Regards,
    Aneliya Petkova
    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