Hello Sten,

Here's a workaround for that:

<style>
    .animContainerClass {
        z-index: 10 !important;
    }
</style>

<TelerikAnimationContainer Width="1600px" Height="800px" Class="k-popup" ParentClass="animContainerClass" @ref="@myPopupRef">lorem ipsum</TelerikAnimationContainer>

<TelerikWindow Modal="true" Visible="true" Width="400px" Height="300px">
    <WindowContent>
        <TelerikDatePicker @bind-Value="@val"></TelerikDatePicker>
        <div style="background: yellow; height: 500px;"></div>
    </WindowContent>
    <WindowTitle><strong>Lorem ipsum</strong></WindowTitle>
</TelerikWindow>

@code {
    DateTime val { get; set; } = DateTime.Now.Date;
    TelerikAnimationContainer myPopupRef;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await myPopupRef.ShowAsync();
    }
}

I am closing this as a duplicate of the other item I linked initially, as this is where the z-index relationships between windows and animation containers are to be resolved. For anyone else finding this page - here's the link: https://feedback.telerik.com/blazor/1432348-modal-window-is-behind-treeview-items-and-animationcontainer.

Regards,
Marin Bratanov
Progress Telerik

Hello Sten,

The animation container, already being in the window should be on top of it. Could you try my sample and see how it works for you? Can you reproduce the problem with it?

On classes for the dropdowns, please Vote and Follow this: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance.

Regards,
Marin Bratanov
Progress Telerik

Hi Sten,

The Window does not render in its place of declaration, it renders at the root of the app. We already have it logged for improvement because I also don't think that the animation container should have a higher z-index than a modal window, and you can track this here (it also offers a workaround to increase the z-index of windows): https://feedback.telerik.com/blazor/1432348-modal-window-is-behind-treeview-items-and-animationcontainer.

That said, since the animation container renders in its place of declaration, if the date picker is inside the window, you should not be experiencing issues. Here's the code I tried and at the end of this message you will find a screenshot of what I get so you can compare and see if I am missing something from your scenario.

<TelerikWindow Modal="true" Visible="true" Width="400px" Height="300px">
    <WindowContent>
        <TelerikDatePicker @bind-Value="@val"></TelerikDatePicker>
        <div style="background: yellow; height: 500px;"></div>
    </WindowContent>
    <WindowTitle><strong>Lorem ipsum</strong></WindowTitle>
</TelerikWindow>

@code {
    DateTime val { get; set; } = DateTime.Now.Date;
}

Regards,
Marin Bratanov
Progress Telerik