It would be nice to be able to configure a show/hide animation for windows.
ADMIN EDIT: This might include a form of a Shown event so that you could know when the content is rendered and available to, for example, focus a button or input. For more details see here
Pressing Shift+Tab initially when the Window is opened, moves the focus from the Window back to the Button that opens it.
Steps To Reproduce:
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.
Consider a scenario with two Windows. The first one is centered. Users open a second Window from the first one, and the second Window gains focus.
At this point, if the user clicks on the titlebar of the first Window, it will lose its centered position and move to the corner of the screen.
Here is a REPL test page: https://blazorrepl.telerik.com/wSOMEtEL55Ddk4v441
A possible workaround is to set explicit Width, Height, Top and Left values to the first Window, so that it's not centered, but appears to be: https://blazorrepl.telerik.com/QeaWuNus07TfnCz731
We are using a "TelerikWindow" that does neither contain the "WindowAction" "Minimize" nor "Maximize", since we do not want the user to do so. It is still possible, however, to minimize / maximize the window using the keyboard shortcuts described here: https://demos.telerik.com/blazor-ui/window/keyboard-navigation
We came up with a hack to work around the current behaivor:
The Window can display as centered, but after the user moves or resizes it, the app is not able to center the Window programmatically.
The only possible workaround is to toggle the Window's Visible parameter:
https://blazorrepl.telerik.com/weaewmFe32oT4rnQ42
<TelerikWindow @bind-Top="@Top" @bind-Left="@Left" Centered="@Centered" @bind-Visible="@Visible">
<WindowTitle>
Title
</WindowTitle>
<WindowContent>
Drag or resize the Window and center it afterwards...
</WindowContent>
</TelerikWindow>
<TelerikButton OnClick="@( () => Visible = !Visible )">Toggle Window</TelerikButton>
<TelerikButton OnClick="@OnCenterClick">Center</TelerikButton>
@code {
string Top { get; set; }
string Left { get; set; }
bool Centered = false;
bool Visible { get; set; } = true;
async Task OnCenterClick()
{
Visible = false;
await Task.Delay(1);
Top = Left = string.Empty;
Visible = true;
}
}
You can move a modal window past the bottom and out of view. At that point the only way to get back to it is to zoom out on the browser. Similarly, if you drag a window to the top, you can move it so high that the title bar is out of view. You can still see the bottom part of the window but even if you zoom out you can't get back to the title bar so the only thing you can do is to either escape out of the window or hope you have Ok/Cancel still visible.
---
ADMIN EDIT
Until a feature is implemented that can do this automatically (whether behind a flag like in our WebForms suite or not), you can handle the window events to check the Top and Left values and compare them with the viewport and the window size.
Here is a basic example:
<TelerikWindow Left="@TheLeft" Top="@TheTop" Draggable="true"
LeftChanged="@LeftChangedHandler" TopChanged="@TopChangedHandler"
Visible="true" Width="400px" Height="300px">
<WindowTitle>Drag me!</WindowTitle>
<WindowContent>When using Left and Top, make sure to update them in the view-model.</WindowContent>
<WindowActions>
<WindowAction Name="Minimize"></WindowAction>
<WindowAction Name="Maximize"></WindowAction>
</WindowActions>
</TelerikWindow>
@code{
string TheLeft { get; set; } = "50px";
string TheTop { get; set; } = "50px";
async Task LeftChangedHandler(string currLeft)
{
float leftValue = float.Parse(currLeft.Replace("px", ""));
Console.WriteLine("left " + leftValue);
//left boundary
if (leftValue < 0)
{
currLeft = "0px";
}
//right boundary - replace hardcoded values with current values from the viewport size
//and take into account the dimensions of your window. This sample hardcodes values for brevity and clarity
//you may find useful packages like this to get the viewport size https://www.nuget.org/packages/BlazorPro.BlazorSize/
if (leftValue > 1000)
{
currLeft = "1000px";
}
TheLeft = currLeft;
await DelayedRender();
}
async Task TopChangedHandler(string currTop)
{
float topValue = float.Parse(currTop.Replace("px", ""));
Console.WriteLine("top: " + topValue);
//top boundary
if (topValue < 0)
{
currTop = "0px";
}
//bottom boundary - replace hardcoded values with current values from the viewport size
//and take into account the dimensions of your window
if (topValue > 600)
{
currTop = "600px";
}
TheTop = currTop;
await DelayedRender();
}
async Task DelayedRender()
{
await Task.Run(async () =>
{
await Task.Delay(30);
await InvokeAsync(StateHasChanged);
});
}
}
---
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 "/"<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>
Scenario is a page containing a grid component and a child component based on the TelerikWindow for viewing/adding/editing. Record selection in grid makes child component visible. Full-record editing may exceed available display space. I have already broken down the model form into smaller pieces using tabstrips but some of the remaining pieces cannot be logically broken up much further.
I would like for optional (or automatic) creation of vertical and horizontal scroll bars on the window when the content exceeds the size of the editing window.
Currently, oversize content is off-screen and not reachable.
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.