Implement custom theme by using Metronic

[My2ndLovE]

UI: Blazor server
Version: 4.4

I have setup a local basic theme by using Volo.Abp.AspNetCore.Components.Server.BasicTheme and everything worked perfectly.

What I am trying to do is implement a bootstrap theme(Metronic ) into abp project.

I have copied all the necessary files and compile the theme as well. It worked as expected except some of the Javascript(Vanilla) features such as turn on/off canvas. I suspect there are some JS related conflicts. But unfortunately, there is no errors at all. So I am struggling to figure out what is the root cause. I also tried to run the theme alone and everything worked perfectly. The problems occurs only when I put everything into abp project.

So my question is, has anyone done similar thing before? Would you mind to share with me what is the best way to implement a theme to avoid such conflicts?

[ebicoglu]

the order of JavaScripts are also imported, check out your bundles, manual script imports

[274188A]

*"important"

[274188A]

Do you have a git repo you can share? - might make it a little easier to trouble shoot

[My2ndLovE]

Thanks for the reply. The issue is caused by some of the JavaScript being executed before the blazor component is fully rendered. The scripts suppose to be execute only when the DOM is ready.
For example
(function() { App.init(); })();

As a result, I wrap it inside a custom event and use Jsinterop to call the script under OnAfterRenderAsync

Javscript:

function OnAfterRender() {
    $(this).trigger("OnAfterRender");
}

$(this).on('OnAfterRender', function () {
    App.init();
});

Blazor component:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        await JsRuntime.InvokeVoidAsync("OnAfterRender");
    }    
    await base.OnAfterRenderAsync(firstRender);
}

It works for me but it required a lot customization on the JavaScript, not sure if it is the best approach though.

[jackehuang]

Is it working now?

[My2ndLovE]

Yes, need to make sure the JavaScript execute correctly.