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:
- Open REPL repro
- Click "Open Modal" Button
- Press "Shift+Tab"
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;
}
}
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 "/"<h1>Hello, world!</h1>
Welcome to your new app.<br />
<TelerikButton OnClick="@SayHelloHandler" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)">Say Hello</TelerikButton>
<br />
@helloString
<TelerikButton OnClick="@ButtonClicked" Title="Open Window">Open Window</TelerikButton>
<TelerikWindow @bind-Visible="@IsLearnMoreWindowVisible"
MaxHeight="90%"
MaxWidth="90%"
Modal="true"
Centered="true">
<WindowTitle>
<strong>Learn More: Something</strong>
</WindowTitle>
<WindowContent>
@(new MarkupString("<p>What is the form called? Will appear in the Header to show the user what they are looking at. Any spaces in the name will be stripped during code generation for T-SQL.</p>"))
</WindowContent>
<WindowActions>
<WindowAction Name="Close" OnClick="@(() => IsLearnMoreWindowVisible = false)"></WindowAction>
</WindowActions>
</TelerikWindow>
@code {
MarkupString helloString;
bool IsLearnMoreWindowVisible = false;
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
void ButtonClicked()
{
IsLearnMoreWindowVisible = true;
}
}
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.
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:
- Open the child Window
- 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.
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>
<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.
- Click/dragging to move the window will reapply top/left property, and then maximize/minimize works properly.
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.
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.
I would like to have an event that fires when the user closes the Window and to be able to cancel the event. I would like to have an identifier if the user pressed the "Esc" key or the Close button rendered in the Browser.
---
ADMIN EDIT
---
At the time of writing, only using the VisibleChanged event can let you prevent the Window from closing. As a workaround, you can cancel this event and use a custom close command that will not trigger it to, effectively, disable closing with Esc: https://blazorrepl.telerik.com/GcaqOxkT13mCiQ4q33.
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 "/"
<TelerikButton OnClick="@ShowModal">Show Modal</TelerikButton>
<TelerikWindow Modal="true" Draggable="true" @bind-Visible="@isModalVisible">
<WindowTitle>
<strong>Sample</strong>
</WindowTitle>
<WindowContent>
<TelerikGrid Data="@objectList" >
<GridColumns>
<GridColumn Field="@(nameof(SampleObject.Name))" Title="Name" />
<GridColumn Field="@(nameof(SampleObject.Description))" Title="Description" />
</GridColumns>
</TelerikGrid>
</WindowContent>
<WindowActions>
<WindowAction Name="Close" />
</WindowActions>
</TelerikWindow>
@code {
public bool isModalVisible = false;
public List<SampleObject> objectList = new();
protected override void OnInitialized()
{
objectList.Add(new SampleObject() { Name = "Object 1", Description = "description for object 1" });
objectList.Add(new SampleObject() { Name = "Object 2", Description = "description for object 2" });
}
public void ShowModal()
{
isModalVisible = true;
}
public class SampleObject
{
public string Name { get; set; }
public string Description { get; set; }
}
}