Is it possible to move the window with the mouse?

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.

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.

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.

 

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.

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

Is it possible to add a button that has text to the window action section?

I am passing an ObservableCollection as a parameter to a component in my WindowContent. If I do that, the window does not open. If I don't pass the parameter, the window opens.

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?

Does the Window component have the ability to close when the overlay outside of the modal is clicked?

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:

 

Thanks

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

When you close the page, the Window tries to dispose and this causes an exception that you can see in the Output > ASP.NET Core Server window. The exception does not show up in the browser, but shows up in the logs.


WARN  2019-12-17 09:26:16,300 Unhandled exception rendering component: Cannot process pending renders after the renderer has been disposed.
Object name: 'Renderer'.
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.Server.Circuits.RemoteRenderer.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.TelerikWindowBase.Refresh()
   at Telerik.Blazor.Components.TelerikWindowBase.Dispose()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.Dispose()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose(Boolean disposing)

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;

    }
}

When minimizing a Window then closing that window the next time it is opened, it is back to the default size but not showing content. 
It does show the un-minimize icon and when clicking on it restores the content within the window.

The window in modal mode, if opened and then maximized, then closed while still maximized, on open again the window is restored to initial unmaxmized state however the button is still in "unmaximize" state so you need to click it twice to maximize again.

 

Setting the state to ImageViewWindow.Maximized = false; before reopening does not do anything with or without StateHasChanged();