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

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

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?

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

    }
}

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

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

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

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.

 

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

Is it possible to move the window with the mouse?

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.

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.