MenuItem cannot be popuop and the clieck not work for the menu item in asp.net

19 Views Asked by At

I have updated from 2016 to 2020. However, when I try to hover on a menu that will pop up menu item. It always cannot prompt.

Here is the code

$(document).ready(function () {
    $(document).on("mouseenter", ".customMenuItem", function () {
        var menuItem = $(this);
        // Remove rmItem class
        menuItem.removeClass("rmItem");
        openMenu(menuItem);
    });

    $(document).on("mouseleave", ".customMenuItem", function () {
        var menuItem = $(this);
        // Remove rmItem class
        menuItem.removeClass("rmItem");
        closeMenu(menuItem);
    });

    $(window).resize(function () {
        adjustMenuTileContainer();
    });

    adjustMenuTileContainer();        

    $("#wrapperContent").click(function () {
        $(".openc").each(function () {
            $(this).removeClass("openc");
        });
    });

    //$(".menuTile").click(function () {
    //    window.location.href = $(this).attr("navigateurl");
    //});

    $(document).on("click", ".menuTile", function () {
        window.location.href = $(this).attr("navigateurl");
    });       
    
});

And for the openMenu(menuItem), for 2016 version, the menuItem will always be li.customMenuItem. However in 2020, it will becomes "li.rmItem.customerMenuItem", thus the css is not work. So how can I fix this issue?

And when the menuItem is popup, the menu cannot be clicked. seems the asp:panel is not properly rendered.

<telerik:RadMenu ID="mainMenu" runat="server" EnableRoundedCorners="false" RenderMode="lightweight" EnableSelection="false" EnableShadows="true" CssClass="hidden" >
                        <Items>
                            <telerik:RadMenuItem runat="server" AccessKey="A" Text="Administration" ToolTip="Administration" Value="lnkAdministration" NavigateUrl="#" meta:resourcekey="Administration" CssClass="customMenuItem">
                                <ContentTemplate>
                                    <div class="dropdown-menuc">
                                        <div class="menuIdentity" id="mm1"></div>
                                        <div class="col-md-12 menuHeader">
                                            <asp:Label runat="server" meta:resourcekey="Administration"></asp:Label>
                                        </div>
                                        <div class="section col-md-12" runat="server" ID="divUserSession">
                                                <asp:Label runat="server" meta:resourcekey="lblUserRelated"></asp:Label>
                                            <hr /></div>

                                        <div class="section col-md-12" runat="server" ID="divSystemSession">
                                            <asp:Label runat="server" meta:resourcekey="lblSystemRelated"></asp:Label>                                                
                                            <hr /></div>                                                                                        
                                        
                                        <asp:Panel ID="liMenuItemAdmProjCode" runat="server"  CssClass="menuTileContainer col-md-2 col-xs-6 col-sm-4">
                                            <div class="menuTile" NavigateUrl="ProjectCodeMgt.aspx">
                                                <div><img src="images/menuIcon/projectCodeMgt.png" /></div>
                                                <asp:Label runat="server" Text="Project Code Management" meta:resourcekey="ADM_PROJCODE"></asp:Label>
                                            </div>
                                        </asp:Panel>                                  

                                    </div>
                                </ContentTemplate>
                                <Items>                               
                                </Items>                                    
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" AccessKey="H" NavigateUrl="Main.aspx" Text="Home" ToolTip="Home" Value="lnkHome" meta:resourcekey="Home">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" AccessKey="D" Text="Dashboard" ToolTip="Dashboard" Value="lnkDashboard" NavigateUrl="~/dashboard/DB_Home.aspx" Target="_blank" meta:resourcekey="ANALYSIS_DASHBOARD">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" AccessKey="M" Text="My AMDP" ToolTip="My AMDP" Value="lnkMyAMDP" NavigateUrl="#" meta:resourcekey="MyAMDP" CssClass="customMenuItem">
                                <ContentTemplate>
                                    <div class="dropdown-menuc">
                                        <div class="menuIdentity" id="mm2"></div>
                                        <div class="col-md-12 menuHeader">
                                            <asp:Label runat="server" meta:resourcekey="MyAMDP"></asp:Label>
                                        </div>                                            

                                        <asp:Panel ID="liMenuItemMyAMDPAdvQTopUp" runat="server" CssClass="menuTileContainer col-md-2 col-xs-6 col-sm-4"  >
                                            <div class="menuTile" NavigateUrl="AdvQTopup.aspx">
                                                <div><img src="images/menuIcon/topup.png" /></div>
                                                <asp:Label runat="server" Text="Top-up" meta:resourcekey="Topup"></asp:Label>
                                            </div>
                                        </asp:Panel>
                       
                                    </div>
                                </ContentTemplate>
                                <Items>
                            
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" AccessKey="R" Text="Reporting" ToolTip="Reporting" Value="lnkReporting" NavigateUrl="#" meta:resourcekey="Reporting" CssClass="customMenuItem">
                                <ContentTemplate>
                                    <div class="dropdown-menuc">
                                        <div class="menuIdentity" id="mm3"></div>
                                        <div class="col-md-12 menuHeader">
                                            <asp:Label runat="server" meta:resourcekey="Reporting"></asp:Label>
                                        </div>
                                        <asp:Panel ID="liMenuItemRptGen" runat="server"  CssClass="menuTileContainer col-md-2 col-xs-6 col-sm-4">
                                            <div class="menuTile" NavigateUrl="Report_Main.aspx">
                                                <div><img src="images/menuIcon/reportMain.png" /></div>
                                                <asp:Label runat="server" Text="Report Generation" meta:resourcekey="REPORT_GENERATE"></asp:Label>
                                            </div>
                                        </asp:Panel>
                                    </div>
                                </ContentTemplate>
                                <Items>                               
                                </Items>
                            </telerik:RadMenuItem>                                
                        </Items>
                    </telerik:RadMenu>

When I click the menu item, it won't go into the click function.

$(document).on("click", ".menuTile", function () {
        window.location.href = $(this).attr("navigateurl");
    });

seems the click is not work in for the menu item, what is the possible reason and how I can debug and fix it?

0

There are 0 best solutions below