Planned
Last Updated: 13 Feb 2024 10:11 by ADMIN
Scheduled for 2024 Q2 (May)
Created by: Doug
Comments: 8
Category: Window
Type: Feature Request
32

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);
        });
    }
}

---

Completed
Last Updated: 19 Dec 2023 17:47 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)
Created by: Will
Comments: 3
Category: Window
Type: Bug Report
9

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;
    }
}

Completed
Last Updated: 08 Nov 2023 14:39 by David
Release 4.1.0 (15/03/2023)
The modal shouldn't prevent tabbing into the browser controls. But the problem is, when using the modal, you can tab to controls and HTML elements behind the modal on the page. You shouldn't be able to interact with these in this way, and in fact mouse clicks are blocked.

This is an accessibility requirement - the behavior should work as expected for mouse users and keyboard users.
Unplanned
Last Updated: 26 Oct 2023 10:09 by ADMIN
Created by: Michael
Comments: 8
Category: Window
Type: Feature Request
23

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

Completed
Last Updated: 12 Oct 2023 15:13 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
After you minimize or maximize the Window, the tooltip for the Restore button displays minimize/maximize instead of restore
Completed
Last Updated: 31 May 2023 16:32 by ADMIN
Release 4.3.0 (06/07/2023) (R2 2023)
Created by: Rob
Comments: 3
Category: Window
Type: Feature Request
22
When using the Window control as a modal, it would be nice to have the ability to define a Footer, similar to the Window Title / Header. 
Unplanned
Last Updated: 07 Mar 2023 16:07 by Alexandre
Created by: Alexandre
Comments: 2
Category: Window
Type: Feature Request
7
I would like to set custom values to the aria-labelledby and aria-describedby HTML attributes via parameters like in other components in the Telerik UI for Blazor suite.
Completed
Last Updated: 27 Feb 2023 12:43 by ADMIN
Release 4.1.0 (15/03/2023)

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;
    }
}
Declined
Last Updated: 26 Jan 2023 08:55 by ADMIN
Created by: Eric
Comments: 1
Category: Window
Type: Bug Report
0

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. 

Unplanned
Last Updated: 21 Dec 2022 11:54 by Venu
The dropdown is not showing all items and the page behind the window is scrolling instead.
Completed
Last Updated: 12 Oct 2022 07:26 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by: Jerome
Comments: 1
Category: Window
Type: Bug Report
1

<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.


Unplanned
Last Updated: 20 Sep 2022 13:03 by ZwapSharp
Created by: ZwapSharp
Comments: 0
Category: Window
Type: Feature Request
3
I would like to use an event that fires when the Window is on focus. 
Completed
Last Updated: 05 Sep 2022 05:02 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)
Created by: Yaimo
Comments: 0
Category: Window
Type: Bug Report
1

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>

Completed
Last Updated: 12 Aug 2022 11:05 by ADMIN

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.

Completed
Last Updated: 19 Jul 2022 10:34 by ADMIN
Release 3.5.0

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:

  1. Open the child Window
  2. 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.

Completed
Last Updated: 23 Jun 2022 12:40 by ADMIN
Release 3.5.0
I'm unable to use the drag bars on the Gantt timeline tasks at V3.3.0. When I move the drag handles on the timeline bar the whole window moves rather than extending the bar. I rolled back to V3.1.0 using the same code and the drag bars worked as they should.
Unplanned
Last Updated: 03 Jun 2022 05:26 by ADMIN
Created by: Michał
Comments: 2
Category: Window
Type: Feature Request
8

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.

Completed
Last Updated: 02 Jun 2022 11:54 by ADMIN
Release 3.4.0

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:

  1. Open the Modal Window
  2. Try to drag it across the page
  3. Try to scroll when you have the Window opened

Reproduction happens in the demo too here: https://demos.telerik.com/blazor-ui/window/modal

Completed
Last Updated: 11 Apr 2022 05:56 by ADMIN
Release 3.2.0
Created by: Don
Comments: 8
Category: Window
Type: Feature Request
43

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.

 

 

 
Completed
Last Updated: 15 Mar 2022 12:10 by ADMIN
Release 3.2.0

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>

1 2 3