Hi,
I believe the HTML version I downloaded, version 8, doesn't actually call _init.js, ,but looks to have the same code in scripts.bundle.js- I presume that init script is bundled in there?
I've got the issue replicated here:
https://devbackofficescheduler-wasm.azurewebsites.net/dashboard
You can see the scripts that I register in the index.html host as well as some registered with a script loader to run after the page has rendered here:
https://devbackofficescheduler-wasm.azurewebsites.net/dashboard

Hi,

I apologize for the late response.

Yes,_init.js is already bundled into scripts.bundle.js. After rechecking your preview I see that you have already connected all required js files and it seems like all menus are working correctly and I do not see any errors in the console.

Are there any specific steps on how we can reproduce this issue?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Thank you so much for all the work you've done so far- I appreciate it.
https://ibb.co/gDrvKcb
This screeenshot shows an error on line 1996 of my scripts.bundle.js- again, that I've tried to extract the init code from- with n.menuobject being an empty object, rather than a KTMenu with its properties (like 'on' that isn't defined here.) Because of that, the rest of this file doesn't run- including the code to handle light/dark mode, where clicking on it takes you to /# rather than being handled and changing the light/dark mode. Maybe you've got a cached page and need to open it in incognito?

Hi,

Ok, I got the issue now. It looks like our KTMenu component hasn't been initialized. You can see that in our default scripts, we are calling KTMenu.init() in the page load event, which works correctly for our HTML version but in your SPA you need to handle initialization differently.

Just for a test, try to do the following.
1) Open the console log in your browser.
2) In your console write KTMenu.init(), this will trigger init function and menu instances will get initialized.
3) All menu should work.

Then to fix this in your C# code you can manually trigger component initialization function as shown below.

protected override void OnAfterRender(bool firstRender)
 {
 if (firstRender)
 {
 JS.InvokeVoidAsync("KTComponents.init");
 }
 }

Hi,
I think something else is going on- if you put a breakpoint on line 1588 of scripts.bundle.js, you'll see that the KTMenu.Init function is hit before you get to the line 1996 issue. I am making this call in my after render just as you recommend, so I've got that covered. If it's easier to just download mine and make it work and send it to me, I can do the work of figuring out what to change to make it happen. Basically what's confusing me is line 1983 setting n.menuObject to an empty JS object rather than a KT menu with all the properties. It actually goes into the constructor and runs through the code, but the variable assignment is somehow an empty object (set a breakpoint on line 1983 to see that):
"menu" === n.layout ? n.menuObject = new KTMenu(n.contentElement) : n.menuObject = null,

Hi,

Yes, the function KTMenu.init is triggered on page load but it will not initialize your content since it is rendered differently in Blazor. You need to call the initialization functions inside OnAfterRender as I showed in my previous comment.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi- sorry I wasn't more clear; it is called in AfterRender of my content page, after all the content has rendered:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("loadScript", "_content/BackOfficeScheduler.Web.Pages/js/scripts.bundle.init.js");
}
}
This dynamically loads the script after render, and the scripts.bundle.init.js file starts with KTComponents.init():
var KTComponents = {
init: function () {
KTApp.init(),
KTDrawer.init(),
KTMenu.init(),
So when I mentioned that KTMenu was called, I meant on AfterRenderAsync.

Hi,

Not sure if your code will work correctly I would suggest you try the approach we are using in our Blazor Server Starterkit.

Add a script tag below to your application:

<script src="/assets/js/scripts.bundle.js"></script>

protected override void OnAfterRender(bool firstRender) { if (firstRender) { JS.InvokeVoidAsync("KTComponents.init"); } }

We were almost there- I was actually calling that in the on render event, but the issue was that there's a call to KTThemeMode in the scripts.bundle.js that was running before the content page loaded, and running it that second time didn't wire up the menu event. I removed those calls, so only the one in after render is called.
If you'd like to see what I did in the event you want to offer a WASM model, I've got it working and am happy to help out.
All fixed.

Hi,

Glad to hear that.

It would be great if you can point us to the initialization which caused the problem since we do not have any issues with our js code in our HTML version.

You can check our Metronic HTML preview page.
https://preview.keenthemes.com/metronic8/demo1/index.html

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Looks like I wasn't very clear, I was trying to say what I did in the last reply. In the HTML version's scripts.bundle.js, there's a call to KTComponents.init; when I had that call in the index.html page, it was being called before the blazor component for menu items ran, so it didn't wire them up to react and change the theme. When the call I made in my afterender ran, for some reason it didn't wire the menu items up either, so it was just following the # link when I tried to change the light/dark mode. When I took that call in the script file out and had only the call in my after render method, the menu items had rendered and were wired up. Let me know if that's still unclear.

Hi,

It sounds like you have removed KTComponents.init call from our scripts and added a trigger for this function inside OnAfterRender . This is how we are handling initialization in our Metronic Blazor Server Starterkit and this didn't cause any issues.

Does the component get initialized in your app?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

This seems to be working.. I also removed the KTComponents.init from the template scripts and then manually called it OnRender and it was sorted..