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

---

I'm working on blazor server side application.
After update Telerik.UI.for.Blazor from 2.1 to 2.5 (before I updated .net core from 3.0 to 3.1) it shows following error:
InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

I investigated that it's cause by Telerik window.
The error occurs when window is on start page or when the page is refreshed.
Below code for Index.razor which cause the error:

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.

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

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.

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>

When I host a TelerikWindow in a component that is itself hosted in a TelerikWindow the main window does not display.

VS shows continuous, never ending, memory consumption.

This behavior just started with the 2.0.0 release.

Dear team,

we use a BlazoredTypeahead control inside a TelerikWindow and have this problem.

When you open the result dropdown of BlazoredTypeahead and click on the scrollbar in the result dropdown, the result dropdown is closed suddenly.

This only happens when a BlazoredTypeahead control is inside a TelerikWindow. If I remove the Telerik Window everything works as expected.

Attached is a running example, which demonstrates the issue. In the example just click on the "New" button in the grid, this will open the TelerikWindow, which contains the BlazoredTypeahead control.

Thanks for your help.

Can we please have an [Open] or [Init] or [OnVisible] event exposed for Blazor Windows?

There is a whole bunch of stuff that I need to do in a Window (e.g. custom modal editing form that needs a lot of temporary supporting data structures) and I am having to do the work in a method that that opens the window, before the Window is opened and passing many data structures to the Window as parameters (there could be more than 20 of these). This is messy.

It would be much simpler, neater and efficient to have the Window create these resources on the fly when the Window is made visible and to dispose of them when the window closes. I would then only need to pass a few essential parameters.

I'm guessing this is a new feature request because I cannot see any way of detecting, in the code for a Window, that it has just been opened (or am I missing something?).

Kind regards,

Paul

==============

Counter.razor:

==============

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<button class="btn btn-danger" @onclick="OpenMiniWin">Open a kendo window</button>

<TelerikButton>Say Hello</TelerikButton>

<div>
    <ul>
        <li>All work and no play makes Jack a dull boy</li>
        <li>All work and no play makes Jack a dull boy</li>
        <li>All work and no play makes Jack a dull boy</li>
    </ul>
</div>


<Tree IsSpecialIcons="true"></Tree>

<TelerikWindow Modal="true" Visible="@isVisibleMiniWin">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
    </WindowContent>    
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>



@code {
    int currentCount = 0;
    bool isVisibleMiniWin = false;

    void IncrementCount()
    {
        currentCount++;
    }

    void OpenMiniWin()
    {
        isVisibleMiniWin = true;
    }
}

==============

Tree.razor:

==============

<TelerikTreeView Data="@FlatData" >
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }

    [Parameter]
    public bool IsSpecialIcons { get; set; } = false;

    public IEnumerable<TreeItem> FlatData { get; set; }

    protected override void OnInitialized()
    {
        LoadFlatData();
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }
}

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

Login Component:

A) Login dialog  - A popup dialog where we can attach a model to the dialog.

B) Login with register button - Where we can provide the register page or register popup to call

C) Login with Forgot password and rest password

D) Login with default

Whenever i refresh a page with F5 i get the following error:

System.ObjectDisposedException: Cannot process pending renders after the renderer has been disposed.
Object name: 'Renderer'.
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContextDispatcher.InvokeAsync(Action workItem)
   at Microsoft.AspNetCore.Components.ComponentBase.InvokeAsync(Action workItem)
   at Telerik.Blazor.Components.TelerikWindow.Refresh()
   at Telerik.Blazor.Components.TelerikWindow.Dispose()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

Application is working normally after an error. Am i doing something wrong?

I have the following code that simulates a "wizard" type experience to show my issue with the window actions disappearing.  Step 1 just shows text and Step 2 has a modal window that pops up when the button in that step is clicked. If I go to another step and then back to Step 2 -- then when I click the show pop up button : the modal window pops up but the "window actions" disappear. There is then no way to close the window.

I can move the Telerik Window control out of the conditional and it will work but this is a simplified version of my problem since I have these windows inside child components so I cannot easily do that. I thought about hiding the "steps" with css but I believe that will keep more things around in the DOM which I don't want. I added the "@ref" also to see if that would help but it doesn't make a difference.

Example:

@if (Step == 1)

{
    <div>Step 1</div>
}
else if (Step == 2)
{
<div>Step 2</div>
    <input type="button" @onclick="() => { IsPopupVisible = true; }" class="btn btn-primary" value="show pop up" />
    <br />
    <br />

        <TelerikWindow @ref="win1" @bind-Visible="@IsPopupVisible" Height="500px" Modal="true">
            <WindowTitle>
                <strong>Pricing Term - Configure</strong>
            </WindowTitle>
            <WindowContent>
                <div>
                    stuff goes here
                </div>
            </WindowContent>
            <WindowActions>
                <WindowAction Hidden="false" Name="Minimize"></WindowAction>
                <WindowAction Hidden="false" Name="Maximize"></WindowAction>
                <WindowAction Hidden="false" Name="Close"></WindowAction>
            </WindowActions>
        </TelerikWindow>
  
}
else if (Step == 3)
{
    <div>Step 3</div>
}
<div class="row">
    <div class="col-12">
        <div>
            @if (Step > 1)
            {
                <input type="button" @onclick="() => MoveStep(-1)" class="btn btn-primary" value="<< Go Back" />
            }
            @if (Step < 3)
            {
                <input type="button" @onclick="() => MoveStep(1)" class="btn btn-primary" value="Continue >>" />
            }
        </div>
        <div></div>
    </div>
</div>


@code {
    public TelerikWindow win1 { get; set; }
    public bool IsPopupVisible { get; set; }

    public int Step { get; set; } = 1;

    public void MoveStep(int move)
    {

        Step += move;

    }
}