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?