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; }
}
}
This is an accessibility requirement - the behavior should work as expected for mouse users and keyboard users.
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 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:
- Open the Modal Window
- Try to drag it across the page
- Try to scroll when you have the Window opened
Reproduction happens in the demo too here: https://demos.telerik.com/blazor-ui/window/modal
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;
}
}