ABP Framework version: v8.0.5
UI Type: Blazor WASM
Database System: EF Core (SQL Server)
Tiered (for MVC) or Auth Server Separated (for Angular): no
Exception message and full stack trace: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.OnInitializedAsync() at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Steps to reproduce the issue: https://docs.telerik.com/blazor-ui/getting-started/client-blazor#43-add-the-telerikrootcomponent
We have implemented telerik components in our application using the steps in the link above and this https://community.abp.io/posts/how-to-integrate-the-telerik-blazor-components-to-the-abp-blazor-ui-q8g31abb but we are currently facing issues with popups positioning as described here https://docs.telerik.com/blazor-ui/troubleshooting/general-issues#wrong-popup-position.
I have already looked at this ticket https://support.abp.io/QA/Questions/6585/Wrap-body-with-TelerikRootComponent and this docuumentation https://docs.abp.io/en/abp/latest/UI/Blazor/Layout-Hooks#specifying-the-layout and implemented the example code but was unable to get the issue fixed. The telerikrootcomponent does not get attached/created
Can you kindly provide me with detailed guide to get the popus for Telerik to work in ABP.
2 Answer(s)
-
0
Hi,
You can try to override the
SideMenuLayoutlayout: https://docs.abp.io/en/commercial/latest/themes/lepton-x/blazor?UI=BlazorServer#side-menu-layout@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout; @using Volo.Abp.DependencyInjection @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common @using Volo.Abp.Ui.Branding @using Volo.Abp.BlazoriseUI.Components @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation @using Volo.Abp.AspNetCore.Components.Web.Theming.Components @using Volo.Abp.Ui.LayoutHooks @using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks @using Volo.Abp.AspNetCore.Components.Web.Theming.Layout @inherits SideMenuLayout @attribute [ExposeServices(typeof(SideMenuLayout))] @attribute [Dependency(ReplaceServices = true)] <TelerikRootComponent> <div> <div id="lpx-wrapper"> <MainHeader /> <div class="lpx-content-container"> <div class="lpx-topbar-container"> <div class="lpx-topbar"> <Breadcrumbs /> </div> </div> <div class="lpx-content-wrapper"> <div class="lpx-content"> <ContentToolbar /> <PageAlert /> <LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Application" /> @Body <LayoutHook Name="@LayoutHooks.Body.Last" Layout="@StandardLayouts.Application" /> <DynamicLayoutComponent /> <UiMessageAlert /> <UiNotificationAlert /> <UiPageProgress /> </div> </div> <footer> <Footer /> </footer> </div> <MobileNavbar /> <div class="lpx-toolbar-container"> <MainHeaderToolbar /> </div> </div> </div> </TelerikRootComponent> -
0
Thank you for the quick response. This solved the problem
