Hi, I'm using the HTML version of the Medtronic Sales Tracking App template in a Blazor WebAssembly application.
With some effort, I'm getting it working, but as soon as I want something generated programmatically, I receive many Javascript errors and something stop working.
For instance, in the `kt_subscriptions_table`, once I make an API call to get the data to show in the rows, in the `OnInitializedAsync()`, the `Actions` menu stop working, probably because the Javascript to initialise the functions on that table has been loaded/executed before the data has been retrieved.
As I've read that the onDOMContentLoaded can't be used in Blazor WebAssembly (is it correct?), does anyone know how to wait that all the content is retrieved before initialising the JS functions needed for that page, or component?
I guess that all the JS commented with "Custom Javascript(used for this page only)" should be loaded in some way after Blazor has loaded everything needed for that page/component.
Thanks
Hello.
Can you share how you managed to add Metronic theme in Blazor WASM? There is no step by step guide on how to achieve that and as it looks like we won't get Blazor WASM StarterKit anytime soon.
Thanks!
Hi,
Unfortunately, we haven't tried combining Metronic with Blazor WASM yet. My replies are based on our experience working with our Blazor Server Starterkit.
You can download the latest Blazor Server Starterkit from Metronic Downloads page.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks Lauris, it helps.
Then, taking as example the Subscriptions List page https://preview.keenthemes.com/metronic8/demo30/apps/subscriptions/list.html, is it correct to assume that all the assets included in the sections identified by the comment `(mandatory for all pages)` can be added in the index.html page, and those included in the section `used for this page only` must be imported in the OnAfterRender override?
And then call the init for every js file imported, looking at the KTUtil.onDOMContentLoaded function included in any of them.
Does it make sense?
Thanks.
Hi,
Yes, the mandatory file needs to be loaded globally and you can load page-level files in OnAfterRender
event. After loading, you can then initialize these JavaScript files by referencing the KTUtil.onDOMContentLoaded
section within the JavaScript file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thank you for reaching out to us.
In our HTML version, we are initializing all of the js code inside the page load event, the page gets refreshed every time you change a route, and this triggers an initialization for each page separately.
Since Blazor Webassembly is a single-page app (SPA) it renders content differently and the page doesn't get reloaded every time you change a route. For SPA you need to handle initialization differently.
Instead of initializing the js code inside the page load event, you can trigger initialization functions in Blazor lifecycle events.
Here is an example:
@inject IJSRuntime JS
@code {
protected override void OnAfterRender(bool firstRender){
JS.InvokeVoidAsync("KTComponents.init");
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// await asynchronous request here
await ...
// reinitialize components
JS.InvokeVoidAsync("KTComponents.init");
}