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