JS Interop for every page
I have a razor component which shows an user list that can be filtered. Each row... has action button which opens a menu on click. But when i filter and users counts change to none.... when i clear filters and get to the default quantity... the action buttons no longer opens the menu. I solved this by adding:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("KTMenu.createInstances");
}
In the razor component i am currently working. But since i will have to deal with this issue on almost every page.... i was wondering where should i place this JS Interop call for being executed on every page?
Replies (3)
I double check it. This is what you have in Shared/MasterInit.razor
Even if i move JS.InvokeVoidAsync("KTComponents.init"); outside the IF, this code does not execute on every page rerender.
if (firstRender)
{
JS.InvokeVoidAsync("scrollTo", 0, 0);
JS.InvokeVoidAsync("KTComponents.init");
JS.InvokeVoidAsync("KTMenu.updateByLinkAttribute",
$"/{NavigationManager.ToBaseRelativePath(NavigationManager.Uri)}");
}
Hi Federico,
Component initialization is triggered inside OnLocationChanged method.
protected override void OnInitialized() {
NavigationManager.LocationChanged += OnLocationChanged;
}
async void OnLocationChanged(object? sender, LocationChangedEventArgs args) {
...
await JS.InvokeVoidAsync("KTComponents.init");
...
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Federico,
This function should already be executed on every page since we are calling KTComponents.init in file Shared/MasterInit.razor. KTComponents.init calls initialization for all our global components, check _keenthemes/src/js/components/_init.js.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
