I would imagine most applications would use the Alert, Confim, Prompt concepts so it would be nice if they were built in.
It would further be nice if they were styleable and callable from c# code very similar to the wpf.
Of course as a default they could follow whatever css style is being used already.
RadWindow.Alert(text);
RadWindow.Confirm(text, () => {});
RadWindow.Prompt(text, result => {});
https://docs.telerik.com/devtools/wpf/controls/radwindow/features/predefined-dialogs
I would like to be to allow the user to resize the Blazor Telerik Window component to their individual liking. For example, like a resizable textbox but for a window/modal. I would assume this would function the same way as I would resize a window in Windows OS by dragging the corner or sides of an open window.
At the moment, a second modal window does not "block" the first.
For example, a static variable in aTelerik Window class can be used to track the z-index and render the dialog and modal background with increasing values when a new one is shown.
If you have other suggestions on handling the situation, share them below. Also, comment whether you would like that static class/variable to be public so you can set its initial value.
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);
});
}
}
---
The Window-Component provides parameters for setting width and height.
In addition to that, it would be great if parameters for MaxWidth, MaxHeight + MinWidth, MinHeight would be provided.
I'm especially missing a MaxHeight parameter for creating popups that grow with the content (only known at runtime) but do not become larger than the screen.
To make sure that the whole content is reachable by the users I'm setting the Height to 95vh but this leaves white space if there is not enough content to fill the screen.
Regards,
René
Currently, when the window is minimized the content is lost. The content area is detached from the DOM and re-initialized when it is shown again.
<AdminEdit>
Workaround:
You can workaround that issue by creating custom minimize and maximize actions for the window, where you hide the content area with CSS.
Code snippet:
<TelerikWindow Class="@( isMinimized ? "minimize-window" : "maximize-window" )"
Width="500px"
Height="@Height"
Top="40%"
Left="45%"
Visible="true">
<WindowTitle>
<strong>Status</strong>
</WindowTitle>
<WindowActions>
<WindowAction Name="MyCustomMinimize" OnClick="@CustomMinimize" Icon="@IconName.WindowMinimize"></WindowAction>
@if (isMinimized)
{
<WindowAction Name="MyCustomMaximize" OnClick="@CustomMaximize" Icon="@IconName.Window"></WindowAction>
}
<WindowAction Name="Close"></WindowAction>
</WindowActions>
<WindowContent>
<form class="k-form">
<fieldset class="k-form-fieldset">
<legend class="k-form-legend">User Details</legend>
<label class="k-form-field">
<span>First Name</span>
<input class="k-textbox" placeholder="Your Name" />
</label>
<label class="k-form-field">
<span>Last Name</span>
<input class="k-textbox" placeholder="Your Last Name" />
</label>
</fieldset>
</form>
</WindowContent>
</TelerikWindow>
@code {
public bool isMinimized { get; set; }
public string Height { get; set; } = "350px";
private void CustomMinimize()
{
isMinimized = true;
Height = "auto";
}
private void CustomMaximize()
{
isMinimized = false;
Height = "350px";
}
}
<style>
.minimize-window .k-content {
display: none;
padding: 0px !important;
}
.maximize-window .k-content {
display: block;
padding: 16px 16px;
}
</style>
</AdminEdit>
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.