@inject IJSRuntime js

<TelerikButton OnClick="@( () => WindowVisible = true )">Show Window</TelerikButton>

<TelerikWindow @bind-Visible="@WindowVisible"
               Modal="true">
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <p>Window Content</p>
        <TelerikButton OnClick="@OnShowDialogButtonClick">Show Dialog</TelerikButton>
    </WindowContent>
</TelerikWindow>

<TelerikDialog @bind-Visible="@DialogVisible"
               Width="300px"
               Class="dialog-on-window">
    <DialogTitle>
        Dialog Title
    </DialogTitle>
    <DialogContent>
        <p>Dialog Content</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton OnClick="@( () => OnDialogButtonClick(true) )">OK</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<script suppress-error="BL9992">
    function bringDialogToTop() {
        var dialogWrapper = document.querySelector(".dialog-on-window").closest(".k-dialog-wrapper");
        if (dialogWrapper) {
            dialogWrapper.style.zIndex = parseInt(dialogWrapper.style.zIndex) + 2;
        }
    }
</script>

@code {
    private bool WindowVisible { get; set; }

    private bool DialogVisible { get; set; }

    private bool ShouldFocusDialog { get; set; }

    private void OnShowDialogButtonClick()
    {
        DialogVisible = true;
        ShouldFocusDialog = true;
    }

    private void OnDialogButtonClick(bool result)
    {
        DialogVisible = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldFocusDialog)
        {
            ShouldFocusDialog = false;
            await Task.Delay(1);

            await js.InvokeVoidAsync("bringDialogToTop");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}