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:
@page "/"The described functionality listed on https://demos.telerik.com/blazor-ui/window/stacking-windows
"The Telerik Window component for Blazor provides stacking z-index functionality that brings to front the component any time it receives focus."
doesn't appear to be working in the demo. When the one window receives focus the z-index does not change. This appears to not work correctly in the demo either.
<TelerikWindow Width="80%"
Height="auto"
Top="404px"
State="WindowState.Minimized"
Left="200px"
Class="myClass"
Visible="true"
><WindowTitle>My Title</WindowTitle><WindowActions><WindowAction Name="Minimize"></WindowAction></WindowActions><WindowContent><h1>My Content</h1></WindowContent></TelerikWindow>
Window starts out minimized, with proper width, height, top and left.
Clicking maximize button clears the top and left property, and resets position every time you open/close.
If you change the state to to WindowState.Maximized, it has the correct top/left property, but resets the width/height properties.
Window is not draggable.
Not setting the State at all is the only way to have proper behavior.
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:
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 happens in the demo too here: https://demos.telerik.com/blazor-ui/window/modal
When setting the Hidden property to true on a WindowAction, the action button is still rendered, e.g.:
<WindowAction Name="Maximize" Hidden="true"></WindowAction>
See this REPL for an example:
https://blazorrepl.telerik.com/wPbGYMvi23qjUo1c41
When using an enclosing div element for Your Telerik Window component:
A view in the web console shows that the defined name in the class-attribute of the div element isn't recognized.
If I have a grid inside a TelerikWindow, when I show the window allowing it to be draggable, there seems to be undesired behavior. In my environments, with 2.26.0, the TelerikWindow extends to the right of the screen and the draggable operation is impacted. I have the following code (very cut-down and simplified) as my Index.razor. If you click the button and start dragging the window around you should see what I am referring to.
@page "/"
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>
Window border styling via css has no effect - no border shows at all - I don't need help, just reporting. Tried it on Edge, Chrome and Firefox
.MyClass { /* targets the entire popup element */
Microsoft Visual Studio Community 2019 Version 16.9.2
border: 5px solid red; }
Progress® Telerik® UI for Blazor Extension - 2021.1.218.1
.NET Framework 4.8.04084
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:
@page "/"
<
TelerikWindow
@
bind-Visible
=
"@WindowIsVisible"
>
<
WindowTitle
>
<
strong
>The Title</
strong
>
</
WindowTitle
>
<
WindowContent
>
This is my window <
strong
>popup</
strong
> content.
</
WindowContent
>
<
WindowActions
>
<
WindowAction
Name
=
"Minimize"
></
WindowAction
>
<
WindowAction
Name
=
"Maximize"
></
WindowAction
>
<
WindowAction
Name
=
"Close"
></
WindowAction
>
</
WindowActions
>
</
TelerikWindow
>
<
TelerikButton
OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Toggle window</
TelerikButton
>
@code {
bool WindowIsVisible { get; set; } = false;
}
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.
Dear team,
we use a BlazoredTypeahead control inside a TelerikWindow and have this problem.
When you open the result dropdown of BlazoredTypeahead and click on the scrollbar in the result dropdown, the result dropdown is closed suddenly.
This only happens when a BlazoredTypeahead control is inside a TelerikWindow. If I remove the Telerik Window everything works as expected.
Attached is a running example, which demonstrates the issue. In the example just click on the "New" button in the grid, this will open the TelerikWindow, which contains the BlazoredTypeahead control.
Thanks for your help.