When I try to add a context menu to the content in the Modal Window the context menu stays behind the modal.

===

A possible workaround is to increase the z-index of the ContextMenu:

<TelerikContextMenu Data="@MenuItems" Selector="#menu-target"
                    Class="menu-on-top" />

<style>
    .menu-on-top,
    .k-animation-container:has(.menu-on-top) {
        z-index: 11000 !important;
    }
</style>

<TelerikWindow Width="240px" Height="160px"
               Top="100px" Left="100px"
               Visible="true" Modal="true">
    <WindowTitle>Window</WindowTitle>
    <WindowContent>
        <div style="height:60px;border: 1px solid;"
             id="menu-target">Right-click me</div>
    </WindowContent>
</TelerikWindow>

@code {
    List<ContextMenuItem> MenuItems { get; set; } = new List<ContextMenuItem>();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            MenuItems.Add(new ContextMenuItem() { Text = $"Menu item {i}" });
        }

        base.OnInitialized();
    }

    public class ContextMenuItem
    {
        public string Text { get; set; } = string.Empty;
    }
}

Seems to be a bug in the 4.0.1 release that causing a resizing event to fire as a window is closed - this means that you have to close the window twice.

This appears when the text exceeds the width of the pop up causing it to wrap. In the attached example, the yellow highlighted text is too long for the window. Shorter texts that don't wrap don't seem to cause the issue.

This bug is repeatable in your demo code:

The page scrolls instead of the window component moving.

You can drag it a few pixels at a time at most.

EDIT:

A workaround could be to disable touch events for dragging (which may also help for other components like the Splitter):

<TelerikWindow Visible="true" Class="workaround-for-touch-drag">
    <WindowTitle>the title</WindowTitle>
    <WindowContent>the content</WindowContent>
</TelerikWindow>

<style>
    .workaround-for-touch-drag {
        touch-action: none;
    }
</style>

When a Window is declared inside the Content of another Window, the child Window is resized twice the dragged size.

Reproduction: https://blazorrepl.telerik.com/wwahOtEt49vtoFbZ39.

Steps to reproduce:

1. Open the child Window
2. Resize the child Window

The behavior occurs when the child Window contains a component. However, it is not applicable for all components. For example, placing a TextBox or simple text in the child Window does not seem to cause an issue.

When you open the Modal Window, try to drag it through a page that has a vertical scrollbar. The Modal Window is moving away from the cursor. This can be seen in our Modal Window demo too. If there is no vertical scrollbar on the page, the Modal Window dragging is working properly.

<div style="height:400px;"></div>
<TelerikButton Icon="window" OnClick=@(()=> WindowVisible = true)>Open Modal</TelerikButton>
<div style="height:400px;"></div>

<TelerikWindow Class="demo-window" Width="500px" Height="300px" Centered="true" @bind-Visible=@WindowVisible Modal="true">
    <WindowTitle>
        <strong>Modal Window</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p>Click the close button to dismiss this modal dialog.</p>
    </WindowContent>
</TelerikWindow>

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

<style type="text/css">
    .demo-window {
        z-index: 44444;
    }
</style>

Reproduction steps:

1. Open the Modal Window
2. Try to drag it across the page
3. Try to scroll when you have the Window opened

Reproduction happens in the demo too here: https://demos.telerik.com/blazor-ui/window/modal

I have a Multiselect as an editor in the Grid. When I click in the multiselect the popup with the choices stays hidden behind the window. 

<AdminEdit>

Workaround:

You can increase the z-index of the k-animation-container

<style>
    .k-animation-container {
        z-index: 15000;
    }
</style>


<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Roles) Title="Position">
            <Template>
                @{
                    var item = context as SampleData;

                    @if (item.Roles.Any())
                    {
                        foreach (var role in item.Roles)
                        {
                            <span>@role</span>
                        }
                    }
                }
            </Template>
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikMultiSelect @bind-Value="@selectedValues" Data="@CurrentlyEditedEmployee.Roles"></TelerikMultiSelect>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> MyData { get; set; }
    List<string> Roles { get; set; }
    SampleData CurrentlyEditedEmployee { get; set; }

    private List<string> selectedValues { get; set; }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service
        await MyService.Update(item);

        // update the local view-model data with the service data
        await GetGridData();
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public List<string> Roles { get; set; } = new List<string>() { "Test" };
    }

    async Task GetGridData()
    {
        MyData = await MyService.Read();
        Roles = await MyService.GetRoles();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();
        private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Name " + i.ToString()
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task<List<string>> GetRoles()
        {
            return await Task.FromResult(Roles);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}

</AdminEdit>

I'm working on blazor server side application.
After update Telerik.UI.for.Blazor from 2.1 to 2.5 (before I updated .net core from 3.0 to 3.1) it shows following error:
InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

I investigated that it's cause by Telerik window.
The error occurs when window is on start page or when the page is refreshed.
Below code for Index.razor which cause the error:

When I host a TelerikWindow in a component that is itself hosted in a TelerikWindow the main window does not display.

VS shows continuous, never ending, memory consumption.

This behavior just started with the 2.0.0 release.

==============

Counter.razor:

==============

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<button class="btn btn-danger" @onclick="OpenMiniWin">Open a kendo window</button>

<TelerikButton>Say Hello</TelerikButton>

<div>
    <ul>
        <li>All work and no play makes Jack a dull boy</li>
        <li>All work and no play makes Jack a dull boy</li>
        <li>All work and no play makes Jack a dull boy</li>
    </ul>
</div>


<Tree IsSpecialIcons="true"></Tree>

<TelerikWindow Modal="true" Visible="@isVisibleMiniWin">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
    </WindowContent>    
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>



@code {
    int currentCount = 0;
    bool isVisibleMiniWin = false;

    void IncrementCount()
    {
        currentCount++;
    }

    void OpenMiniWin()
    {
        isVisibleMiniWin = true;
    }
}

==============

Tree.razor:

==============

<TelerikTreeView Data="@FlatData" >
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }

    [Parameter]
    public bool IsSpecialIcons { get; set; } = false;

    public IEnumerable<TreeItem> FlatData { get; set; }

    protected override void OnInitialized()
    {
        LoadFlatData();
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }
}

Whenever i refresh a page with F5 i get the following error:

System.ObjectDisposedException: Cannot process pending renders after the renderer has been disposed.
Object name: 'Renderer'.
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContextDispatcher.InvokeAsync(Action workItem)
   at Microsoft.AspNetCore.Components.ComponentBase.InvokeAsync(Action workItem)
   at Telerik.Blazor.Components.TelerikWindow.Refresh()
   at Telerik.Blazor.Components.TelerikWindow.Dispose()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

Application is working normally after an error. Am i doing something wrong?

I have the following code that simulates a "wizard" type experience to show my issue with the window actions disappearing.  Step 1 just shows text and Step 2 has a modal window that pops up when the button in that step is clicked. If I go to another step and then back to Step 2 -- then when I click the show pop up button : the modal window pops up but the "window actions" disappear. There is then no way to close the window.

I can move the Telerik Window control out of the conditional and it will work but this is a simplified version of my problem since I have these windows inside child components so I cannot easily do that. I thought about hiding the "steps" with css but I believe that will keep more things around in the DOM which I don't want. I added the "@ref" also to see if that would help but it doesn't make a difference.

Example:

@if (Step == 1)

{
    <div>Step 1</div>
}
else if (Step == 2)
{
<div>Step 2</div>
    <input type="button" @onclick="() => { IsPopupVisible = true; }" class="btn btn-primary" value="show pop up" />
    <br />
    <br />

        <TelerikWindow @ref="win1" @bind-Visible="@IsPopupVisible" Height="500px" Modal="true">
            <WindowTitle>
                <strong>Pricing Term - Configure</strong>
            </WindowTitle>
            <WindowContent>
                <div>
                    stuff goes here
                </div>
            </WindowContent>
            <WindowActions>
                <WindowAction Hidden="false" Name="Minimize"></WindowAction>
                <WindowAction Hidden="false" Name="Maximize"></WindowAction>
                <WindowAction Hidden="false" Name="Close"></WindowAction>
            </WindowActions>
        </TelerikWindow>
  
}
else if (Step == 3)
{
    <div>Step 3</div>
}
<div class="row">
    <div class="col-12">
        <div>
            @if (Step > 1)
            {
                <input type="button" @onclick="() => MoveStep(-1)" class="btn btn-primary" value="<< Go Back" />
            }
            @if (Step < 3)
            {
                <input type="button" @onclick="() => MoveStep(1)" class="btn btn-primary" value="Continue >>" />
            }
        </div>
        <div></div>
    </div>
</div>


@code {
    public TelerikWindow win1 { get; set; }
    public bool IsPopupVisible { get; set; }

    public int Step { get; set; } = 1;

    public void MoveStep(int move)
    {

        Step += move;

    }
}

The window in modal mode, if opened and then maximized, then closed while still maximized, on open again the window is restored to initial unmaxmized state however the button is still in "unmaximize" state so you need to click it twice to maximize again.

Setting the state to ImageViewWindow.Maximized = false; before reopening does not do anything with or without StateHasChanged();