Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

Blazor error during click on custom left menu


i am using blazor demo, downloaded from your site, in left menu when i create separate custom menu without expandable, single menu and click on that menu during run application
i find error below code of peace and application stops to run


below is the peace of code in which error comes at bold line

async void OnLocationChanged(object sender, LocationChangedEventArgs args) {
await JS.InvokeVoidAsync("scrollTo", 0, 0);
await JS.InvokeVoidAsync("KTComponents.init");
await JS.InvokeVoidAsync("KTMenu.updateByLinkAttribute", $"/{NavigationManager.ToBaseRelativePath(args.Location)}");
}

await JS.InvokeVoidAsync("KTMenu.updateByLinkAttribute", $"/{NavigationManager.ToBaseRelativePath(args.Location)}");

Error is

blazor.server.js:1 [2022-11-24T10:06:24.739Z] Error: Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'closest')
TypeError: Cannot read properties of undefined (reading 'closest')
at _getItemParentElement (http://localhost:5170/assets/js/scripts.bundle.js:2439:24)
at _getItemParentElements (http://localhost:5170/assets/js/scripts.bundle.js:2460:22)
at _setActiveLink (http://localhost:5170/assets/js/scripts.bundle.js:2752:27)
at KTMenu.the.setActiveLink (http://localhost:5170/assets/js/scripts.bundle.js:2907:16)
at KTMenu.updateByLinkAttribute (http://localhost:5170/assets/js/scripts.bundle.js:3166:26)
at http://localhost:5170/_framework/blazor.server.js:1:3501
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (http://localhost:5170/_framework/blazor.server.js:1:3475)
at http://localhost:5170/_framework/blazor.server.js:1:72077
at Array.forEach (<anonymous>)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.Shared.MasterInit.OnLocationChanged(Object sender, LocationChangedEventArgs args) in C:\Development_Stuff\Metronic\metronic_blazor_v8.1.5_demo1\blazor_demo1\Starterkit\Shared\MasterInit.razor:line 38
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)


G
Guest 1 year ago
Blazor
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author1 year ago

Hi,

Could you please attach the code of your menu element?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


G
Guest 1 year ago

_SidebarMenu.razor

<!--begin::sidebar menu-->
<div class="app-sidebar-menu overflow-hidden flex-column-fluid">
<!--begin::Menu wrapper-->
<div class="app-sidebar-wrapper hover-scroll-overlay-y my-5" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer" data-kt-scroll-wrappers="#kt_app_sidebar_menu" data-kt-scroll-offset="5px" data-kt-scroll-save-state="true">
<!--begin::Menu-->
<div class="menu menu-column menu-rounded menu-sub-indention px-3" data-kt-menu="true" data-kt-menu-expand="false">

<!--end:Menu item-->
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link active" href="/index" >
<span class="menu-icon">@((MarkupString)KTTheme.getSvgIcon("duotune/general/gen002.svg", "svg-icon svg-icon-2"))</span>
<span class="menu-title">Dashboard</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->

<!--begin:Menu item-->
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<!--begin:Menu link-->
<span class="menu-link">
<span class="menu-icon">@((MarkupString)KTTheme.getSvgIcon("duotune/general/gen025.svg", "svg-icon svg-icon-2"))</span>
<span class="menu-title">Incident</span>
<span class="menu-arrow"></span>
</span>
<!--end:Menu link-->
<!--begin:Menu sub-->
<div class="menu-sub menu-sub-accordion">
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="/incidents/incidentwizard">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Incident Wizard</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="/dashboards/ecommerce">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">eCommerce</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->
</div>
<!--end:Menu sub-->
</div>
<!--end:Menu item-->



</div>
<!--end::Menu-->
</div>
<!--end::Menu wrapper-->
</div>
<!--end::sidebar menu-->


below code is not working and when i click on link it raises error (mentioned in above)

<a class="menu-link active" href="/index" >
<span class="menu-icon">@((MarkupString)KTTheme.getSvgIcon("duotune/general/gen002.svg", "svg-icon svg-icon-2"))</span>
<span class="menu-title">Dashboard</span>
</a>


below is the structure in app (Note: i have given only necessary item for understand)


  1. Admin (Solution)


    1. Pages (folder)


      1. index.razor





content of index.razor
@page "/"


user
Lauris Stepanovs Author1 year ago

Hi,

Thank you for your feedback.

We reproduced an error, an error appears only when you are using menu link without an accordion. We will include a fix in the next release, now as a temporary solution, you can follow instructions below.


  1. Open file Starterkit/_keenthemes/src/js/components/menu.js

  2. In _setActiveLink function make the following changes.
    Update line 692 from

    var parentItems = _getItemParentElements(item);

    to

    var parentItems = item ? _getItemParentElements(item) : null;

    And wrap the 699 line with an if statement.

    if(item){
     _showAccordion(item);
    }




Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(