Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 () 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 () 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 3 years ago
Blazor
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author 3 years ago

Hi,

Could you please attach the code of your menu element?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


G
Guest 3 years 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 Author 3 years 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(