Planned
Last Updated: 12 May 2022 13:58 by ADMIN
Scheduled for 3.9.0
Created by: Michael
Comments: 2
Category: Window
Type: Feature Request
13

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

Unplanned
Last Updated: 23 Apr 2022 19:18 by Yaimo
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.

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>

Completed
Last Updated: 08 Mar 2022 05:53 by ADMIN

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é

Unplanned
Last Updated: 28 Feb 2022 18:05 by ADMIN
Created by: Doug
Comments: 8
Category: Window
Type: Feature Request
18

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

---

Unplanned
Last Updated: 21 Feb 2022 13:11 by ADMIN
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.


Planned
Last Updated: 08 Feb 2022 13:07 by ADMIN

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

Unplanned
Last Updated: 07 Feb 2022 13:49 by ADMIN
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.
Declined
Last Updated: 15 Dec 2021 14:10 by ADMIN

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

 

  
Declined
Last Updated: 30 Nov 2021 16:23 by ADMIN
Created by: Özmen
Comments: 3
Category: Window
Type: Bug Report
0

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.

Completed
Last Updated: 29 Nov 2021 12:43 by ADMIN
Release 2.30.0
Created by: Jack
Comments: 0
Category: Window
Type: Feature Request
5
Currently when you click outside of a modal the escape key no longer closes it. We'd like to be able to close the modal with the escape key even when there's a click outside.
Completed
Last Updated: 29 Nov 2021 12:27 by ADMIN
Release 2.30.0
Created by: Roger
Comments: 2
Category: Window
Type: Feature Request
19
Does the Window component have the ability to close when the overlay outside of the modal is clicked?
Unplanned
Last Updated: 25 Nov 2021 13:41 by ADMIN
Created by: Michał
Comments: 0
Category: Window
Type: Feature Request
4
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. 
Duplicated
Last Updated: 02 Sep 2021 05:40 by ADMIN

I am running into an issue with what I believe is the default behaviour of the TelerikWindow, namely capturing @onkeydown - events and closing the window when the user presses escape.

Is there any way to disable this default behaviour of the dialog / overwrite its onkeydown event handler?

---
ADMIN EDIT

Include the ability to :

  • Disable keyboard shortcuts altogether
  • Use custom keyboard shortcuts
  • Use a combination of several keys (e.g. Shift + ESC)
  • Define several keyboard shortcuts at the same time for the same action

If you have any preferences how to expose this functionality please leave a comment. Any feedback on how to handle this on a Mac for the Ctrl and CMD keys is welcome (e.g. should the shortcut for the Ctrl key handle the CMD key for the Mac automatically).

In the meantime you could use the following snippet as a workaround to disable the Esc key:

@result

<TelerikButton OnClick="@ToggleWindow">Toggle the Window</TelerikButton>

<TelerikWindow Visible="@isVisible" VisibleChanged="@VisibleChangedHandler">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="MyCustomClose" Icon="@IconName.Close" OnClick="@MyCustomCloseHandler" />
    </WindowActions>
</TelerikWindow>

@code {
    bool isVisible { get; set; }
    string result { get; set; }

    void VisibleChangedHandler(bool currVisible)
    {
        // if you don't do this, the window won't close because of the user action
        // so if you don't update the view-model here, the window will not close when Esc is pressed

        //isVisible = currVisible;

        result = $"the window is now visible: {isVisible}";

        Console.WriteLine($"Closing because of Esc key");
    }

    void MyCustomCloseHandler()
    {
        //will fire on click only
        isVisible = false;
        //since the built-in window UI didn't invoke this change, the event will not fire
    }

    public void ToggleWindow()
    {
        isVisible = !isVisible;

        result = $"the window is now visible: {isVisible}";
    }
}

---

Declined
Last Updated: 25 Aug 2021 08:54 by ADMIN
Created by: Chuck
Comments: 2
Category: Window
Type: Bug Report
0

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; }
   }
}
Completed
Last Updated: 06 Jul 2021 17:08 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.

Unplanned
Last Updated: 20 May 2021 13:20 by ADMIN
Created by: Will
Comments: 0
Category: Window
Type: Bug Report
3

When I try to add a context menu to the content in the Modal Window the context menu stays behind the modal.

 

<AdminEdit>

As a workaround, you should increase the z-index of the k-animation-container

  .k-animation-container {
        z-index: 15000 !important;
    }

</AdminEdit>

Completed
Last Updated: 19 Apr 2021 16:53 by ADMIN
Release 2.24.0

I have a Multiselect as an editor in the Grid. When I click in the multiselect the popup with the choices stays hidden behind the window. 

 

<AdminEdit>

Workaround:

You can increase the z-index of the k-animation-container

<style>
    .k-animation-container {
        z-index: 15000;
    }
</style>


<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Roles) Title="Position">
            <Template>
                @{
                    var item = context as SampleData;

                    @if (item.Roles.Any())
                    {
                        foreach (var role in item.Roles)
                        {
                            <span>@role</span>
                        }
                    }
                }
            </Template>
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikMultiSelect @bind-Value="@selectedValues" Data="@CurrentlyEditedEmployee.Roles"></TelerikMultiSelect>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> MyData { get; set; }
    List<string> Roles { get; set; }
    SampleData CurrentlyEditedEmployee { get; set; }

    private List<string> selectedValues { get; set; }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service
        await MyService.Update(item);

        // update the local view-model data with the service data
        await GetGridData();
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public List<string> Roles { get; set; } = new List<string>() { "Test" };
    }

    async Task GetGridData()
    {
        MyData = await MyService.Read();
        Roles = await MyService.GetRoles();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();
        private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Name " + i.ToString()
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task<List<string>> GetRoles()
        {
            return await Task.FromResult(Roles);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}

</AdminEdit>

Declined
Last Updated: 06 Apr 2021 16:45 by ADMIN
Created by: Guy
Comments: 2
Category: Window
Type: Bug Report
0

Window border styling via css has no effect - no border shows at all - I don't need help, just reporting. Tried it on Edge, Chrome and Firefox

.MyClass { /* targets the entire popup element */

border: 5px solid red; }

Microsoft Visual Studio Community 2019 Version 16.9.2
Progress® Telerik® UI for Blazor Extension - 2021.1.218.1
.NET Framework 4.8.04084
1 2