Telerik Forums / UI for ASP.NET AJAX

Hide RadMenu with multiple submenus after click.

1 Answer 79 Views
Menu
Rick
Top achievements
Rank 1
Rick asked on 11 May 2022, 06:42 PM

On mobile the menu stays visible and blocks the view of the grid. Is there a way to hide the menu after clicking the submenu categories? I found a solution here for menus with no sub menus, but on this particular site I cannot get it to work, it either hides the submenus after clicking the parent item or does not work at all.

Site is here: http://www.process-comp.com/inventory.aspx

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="inventory.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head runat="server">

    <title></title>

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />

    <link href="css/grid.css" rel="stylesheet" />

    <script>


        function onClientItemClicked(sender, eventArgs) {

            sender.close(true);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server" style="height: 100%; width: 100%; margin: 0px;">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

            <Scripts>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

            </Scripts>

        </telerik:RadScriptManager>

        <div style="height: 100%; width: 100%; margin: 0px; background-color: #ddd; position:fixed">

            <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" Width="100%"

                BorderSize="0" Orientation="Horizontal" Skin="BlackMetroTouch">

                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="38px" ShowContentDuringLoad="false">                    

                    <div> 

                        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="BlackMetroTouch" Height="38px" CssClass="menu" RenderMode="Classic" 

                            CollapseAnimation-Type="InExpo" ExpandAnimation-Type="OutExpo" DefaultGroupSettings-OffsetX="42" CollapseAnimation-Duration="200" ExpandAnimation-Duration="200" CollapseDelay="0" >

                                

                            <Items>                                    

                                <telerik:RadMenuItem Text="Select One &#9660" CssClass="menuitem" GroupSettings-OffsetX="-1">

                                    <Items>

                                        <telerik:RadMenuItem CssClass="menusubitem-main" Text="Compression Equip. 1" GroupSettings-OffsetX="-184">                                                

                                            <Items>

                                                <telerik:RadMenuItem OnClientItemClicked="onClientItemClicked" CssClass="menusubitem-full" Text="Blocks" Target="contentPane" NavigateUrl="inventory/blocks.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Camshafts" Target="contentPane" NavigateUrl="inventory/camshafts.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Cylinders">

                                                    <GroupSettings ExpandDirection="Down" />

                                                    <Items>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Ajax" Target="contentPane" NavigateUrl="inventory/ajax.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Ariel" Target="contentPane" NavigateUrl="inventory/ariel.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Cooper Bessemer">

                                                            <GroupSettings ExpandDirection="Down" />

                                                            <Items>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 0'' - 9.99''" Target="contentPane" NavigateUrl="inventory/cbgrp1.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 10'' - 19.99''" Target="contentPane" NavigateUrl="inventory/cbgrp2.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 20'' - UP" Target="contentPane" NavigateUrl="inventory/cbgrp3.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="All Sizes" Target="contentPane" NavigateUrl="inventory/cball.aspx"></telerik:RadMenuItem>

                                                            </Items>

                                                        </telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Clark">

                                                            <GroupSettings ExpandDirection="Down" />

                                                            <Items>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 0'' - 9.99''" Target="contentPane" NavigateUrl="inventory/clarkgrp1.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 10'' - 19.99''" Target="contentPane" NavigateUrl="inventory/clarkgrp2.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 20'' - UP" Target="contentPane" NavigateUrl="inventory/clarkgrp3.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="All Sizes" Target="contentPane" NavigateUrl="inventory/clarkall.aspx"></telerik:RadMenuItem>

                                                            </Items>

                                                        </telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Corken" Target="contentPane" NavigateUrl="inventory/corken.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Chicago Pnuematic" Target="contentPane" NavigateUrl="inventory/cp.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Delaval" Target="contentPane" NavigateUrl="inventory/delaval.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Gardner Denver" Target="contentPane" NavigateUrl="inventory/gd.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Gemini" Target="contentPane" NavigateUrl="inventory/gemini.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Hall" Target="contentPane" NavigateUrl="inventory/hall.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Ingersoll Rand">

                                                            <GroupSettings ExpandDirection="Down" />

                                                            <Items>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 0'' - 9.99''" Target="contentPane" NavigateUrl="inventory/irgrp1.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 10'' - 19.99''" Target="contentPane" NavigateUrl="inventory/irgrp2.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Bore 20'' - UP" Target="contentPane" NavigateUrl="inventory/irgrp3.aspx"></telerik:RadMenuItem>

                                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="All Sizes" Target="contentPane" NavigateUrl="inventory/irall.aspx"></telerik:RadMenuItem>

                                                            </Items>

                                                        </telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="JA" Target="contentPane" NavigateUrl="inventory/ja.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Joy" Target="contentPane" NavigateUrl="inventory/joy.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Knight" Target="contentPane" NavigateUrl="inventory/knight.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Knox" Target="contentPane" NavigateUrl="inventory/knox.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Pennsylvania" Target="contentPane" NavigateUrl="inventory/penn.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Superior" Target="contentPane" NavigateUrl="inventory/superior.aspx"></telerik:RadMenuItem>

                                                        <telerik:RadMenuItem CssClass="menusubitem-full" Text="Worthington" Target="contentPane" NavigateUrl="inventory/worth.aspx"></telerik:RadMenuItem>

                                                    </Items>

                                                </telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Cyl. Heads" Target="contentPane" NavigateUrl="inventory/compcylheads.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Cylinder Liners" Target="contentPane" NavigateUrl="inventory/cylliners.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Misc." Target="contentPane" NavigateUrl="inventory/compmisc.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Pistons" Target="contentPane" NavigateUrl="inventory/comppist.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Valves" Target="contentPane" NavigateUrl="inventory/compvalves.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Compressor Rods" Target="contentPane" NavigateUrl="inventory/comprods.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Coolers" Target="contentPane" NavigateUrl="inventory/coolers.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Crankshafts" Target="contentPane" NavigateUrl="inventory/cranks.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Crossheads" Target="contentPane" NavigateUrl="inventory/crossheads.aspx"></telerik:RadMenuItem>

                                                

                                            </Items>

                                        </telerik:RadMenuItem>

                                        <telerik:RadMenuItem CssClass="menusubitem-main" Text="Compression Equip. 2" GroupSettings-OffsetX="-184" GroupSettings-OffsetY="-36">

                                               <Items>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Engines" Target="contentPane" NavigateUrl="inventory/engines.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Engines Misc." Target="contentPane" NavigateUrl="inventory/enginesmisc.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Frames" Target="contentPane" NavigateUrl="inventory/frames.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Gas Compressors" Target="contentPane" NavigateUrl="inventory/gascomp.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Manifolds" Target="contentPane" NavigateUrl="inventory/manifolds.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Master Rods" Target="contentPane" NavigateUrl="inventory/mastrods.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Motors" Target="contentPane" NavigateUrl="inventory/motors.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Power Cylinders" Target="contentPane" NavigateUrl="inventory/powcyls.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Power Cylinder Heads" Target="contentPane" NavigateUrl="inventory/powcylhds.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Power Pistons" Target="contentPane" NavigateUrl="inventory/powpist.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Power Rods" Target="contentPane" NavigateUrl="inventory/powrods.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Turbos" Target="contentPane" NavigateUrl="inventory/turbos.aspx"></telerik:RadMenuItem>

                                               </Items>

                                        </telerik:RadMenuItem>

                                        <telerik:RadMenuItem CssClass="menusubitem-main" Text="Process Equipment" GroupSettings-OffsetX="-184" GroupSettings-OffsetY="-72">

                                            <Items>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Chillers" Target="contentPane" NavigateUrl="inventory/chillers.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Columns" Target="contentPane" NavigateUrl="inventory/columns.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Coolers" Target="contentPane" NavigateUrl="inventory/coolers.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Filters" Target="contentPane" NavigateUrl="inventory/filters.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Glycol Units" Target="contentPane" NavigateUrl="inventory/glycol.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Heaters" Target="contentPane" NavigateUrl="inventory/heaters.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Heat Exchangers" Target="contentPane" NavigateUrl="inventory/heatex.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Horizontal Vessels" Target="contentPane" NavigateUrl="inventory/horizontal.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Motors" Target="contentPane" NavigateUrl="inventory/motors.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Plants" Target="contentPane" NavigateUrl="inventory/plants.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Process Misc." Target="contentPane" NavigateUrl="inventory/promisc.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Pumps" Target="contentPane" NavigateUrl="inventory/pumps.aspx"></telerik:RadMenuItem>

                                                <telerik:RadMenuItem CssClass="menusubitem-full" Text="Vertical Vessels" Target="contentPane" NavigateUrl="inventory/vertical.aspx"></telerik:RadMenuItem>

                                            </Items>

                                        </telerik:RadMenuItem>

                                    </Items>

                                </telerik:RadMenuItem>

                            </Items>

                        </telerik:RadMenu>

                        <a class="exit" href="index.html">EXIT</a>

                    </div>                    

                </telerik:RadPane>

                <telerik:RadPane ID="contentPane" runat="server" ContentUrl="inventory/invlanding-full.aspx" 

                    Width="100%" TabIndex="2" ShowContentDuringLoad="false">

                </telerik:RadPane>

            </telerik:RadSplitter>

        </div>

    </form>

</body>

</html>


1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 16 May 2022, 03:59 PM

Hi Rick,

You can handle the OnClientItemClicked event of the whole menu and cancel the arguments only of the nodes that have no children in a similar way:

                        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="BlackMetroTouch" Height="38px" CssClass="menu" RenderMode="Classic"
                            CollapseAnimation-Type="InExpo" ExpandAnimation-Type="OutExpo" DefaultGroupSettings-OffsetX="42"
                            CollapseAnimation-Duration="200" ExpandAnimation-Duration="200" CollapseDelay="0"
                            OnClientItemClicked="onClientItemClicked">
                            <Items>
                                ...
                            </Items>
                        </telerik:RadMenu>

    <script>
        function onClientItemClicked(sender, eventArgs) {
            var item = eventArgs.get_item();
            if (!item.get_childListElement()) {
                sender.close(true);
            }
        }
    </script>

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Menu
Asked by
Rick
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or