@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);
    }
}

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')

<TelerikDialog @bind-Visible="@Visible"
               Title="@Title">
    <DialogContent>
        <TelerikGrid Data=@GridData Pageable="true" Height="400px" Width="700px">
            <GridToolBar>
                <span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
                <div onkeydown="event.stopPropagation()">
                    <GridSearchBox />
                </div>
            </GridToolBar>
            <GridColumns>
                <GridColumn Field="@(nameof(Employee.EmployeeId))" />
                <GridColumn Field=@nameof(Employee.Name) />
                <GridColumn Field=@nameof(Employee.Team) Title="Team" />
                <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
            </GridColumns>
        </TelerikGrid>
    </DialogContent>
</TelerikDialog>

@code {
    private bool Visible { get; set; } = true;
    private string Title { get; set; } = "Software Update";

    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
                {
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Team = "Team " + i % 3,
                    IsOnLeave = i % 2 == 0
                });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

    body {
        display:flex;
    }

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
        <br />
        <TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
        <TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
    <WindowTitle>
        <strong>The SECOND</strong>
    </WindowTitle>
    <WindowContent>
        Second modal!
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }
    bool isModalVisible { get; set; }
    bool isSecondModalVisible { get; set; }
    async Task ShowConfirmWithTitle()
    {
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");

        Console.WriteLine($"The user is sure: {isConfirmed}.");
    }
}