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)
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
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
