Completed
Last Updated: 30 Oct 2019 13:44 by ADMIN
Release 2.3.0
Mark
Created on: 18 Oct 2019 22:05
Category: Window
Type: Bug Report
1
Window - the window actions (maximize, minimize) disappear

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;

    }
}

1 comment
ADMIN
Marin Bratanov
Posted on: 19 Oct 2019 08:29

Hi Mark,

I moved this to the Feedback Portal so you can Follow its status. Here's a link so you can find it: https://feedback.telerik.com/blazor/1435052-window-the-window-actions-maximize-minimize-disappear.

And here's a workaround that seems to work for me in this test scenario:

 

@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>
                @if (IsPopupVisible) // the workaround - seems to force Blazor to include these elements in the diff
                {
                    <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;

    }

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor