Get Menu Text Selected Client Side

4 posts, 0 answers
  1. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 11 Dec 2014 Link to this post

    How do I get the menu text of the menu item selected with client side code?

    Thanks
  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 12 Dec 2014 Link to this post

    Hi Jerry,

    You can use the OnClientItemClicked or OnClientItemFocus events. Please try the following example:
    <head runat="server">
        <title></title>
        <style>
            .eventLog {
                display: block;
                position: relative;
                float: right;
                right: 300px;
                width: 300px;
                height:300px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <telerik:RadMenu ID="RadMenu1" runat="server" Style="left: 100px; top: 2px" OnClientItemFocus="onItemFocus">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem 1">
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3" Enabled="false">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem 3" Enabled="false">
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem 2">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
            </div>
            <script type="text/javascript">
                function onItemFocus(sender, eventArgs) {
                    var item = eventArgs.get_item();
                    logEvent("Item " + item.get_text());
                }
     
                function logEvent(text) {
                    var log = $get("EventLog");
     
                    log.value += text + "\n";
                    log.scrollTop = log.scrollHeight;
                }
            </script>
            <textarea id="EventLog" class="eventLog"></textarea>
        </form>
    </body>


    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 15 Dec 2014 in reply to Aneliya Petkova Link to this post

    Thanks Aneliya that worked for me.

    I have another question. I have the RadMenu inside of a RadAjaxPanel. When the RadMenu is in Mobile render mode and the menu is clicked on (expanded) and then click on a menu item, the expanded menu does not collapse back to the mobile icon. Is there a way in the client code javascript to force the RadMenu to collapse in mobile mode?
  5. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 16 Dec 2014 Link to this post

    Hi Jerry,

    Regarding your other question about mobile RadMenu - you can use the OnClientItemClicked event in order to collapse the menu when you click on a RadMenuItem. Please use the following code:
    function clicked(sender, eventArgs) {
        var rootToggleElement = sender._getRootToggleElement();
        $telerik.$(rootToggleElement).click();
    }

    Hope this will be 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.

     
Back to Top