Skip to content

Commit dc924e3

Browse files
ntachevadimodidmihaylo
authored
[4.1.]KB(window):keep content on close (#1353)
* kb(window):keep content on close * Update knowledge-base/window-keep-content-when-closed.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/window-keep-content-when-closed.md Co-authored-by: Dimo Dimov <[email protected]> * kb(window):address feedack * docs: add minor updates --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: dmihaylo <[email protected]>
1 parent b50baf2 commit dc924e3

File tree

4 files changed

+229
-4
lines changed

4 files changed

+229
-4
lines changed

‎components/dialog/action-buttons.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,7 @@ The following example demonstrates all supported layout options for the Dialog a
7373
}
7474
}
7575
````
76+
77+
## See Also
78+
79+
* [(KB) Keep Content in the DOM When the Window Is Closed]({%slug window-kb-keep-content-when-closed%})

‎components/dialog/header.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ The following example demonstrates how to set up the title through a template. T
3737
3838
<TelerikDialog @bind-Visible="@Visible" ShowCloseButton="false">
3939
<DialogTitle>
40-
<TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
40+
<TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikFontIcon>
4141
<strong>@Title</strong>
42-
<TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
42+
<TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikFontIcon>
4343
</DialogTitle>
4444
<DialogContent>
4545
A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
@@ -55,4 +55,8 @@ The following example demonstrates how to set up the title through a template. T
5555
private bool Visible { get; set; } = true;
5656
private string Title { get; set; } = "Software Update";
5757
}
58-
````
58+
````
59+
60+
## See Also
61+
62+
* [(KB) Keep Content in the DOM When the Window Is Closed]({%slug window-kb-keep-content-when-closed%})

‎components/window/actions.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,4 +140,5 @@ You can mix custom actions with built-in actions, and you do not have to define
140140

141141
## See Also
142142

143-
* [Live Demo: Window Actions](https://demos.telerik.com/blazor-ui/window/actions)
143+
* [(Demo) Window Actions](https://demos.telerik.com/blazor-ui/window/actions)
144+
* [(KB) Keep Content in the DOM When the Window Is Closed]({%slug window-kb-keep-content-when-closed%})

‎knowledge-base/window-keep-content-when-closed.md‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
---
2+
title: Keep the Content in the DOM When the Window Is Closed
3+
description: Learn how to keep the content of the Telerik UI for Blazor Window in the DOM when the component is closed.
4+
type: how-to
5+
page_title: Keep Content in DOM When Blazor Window Is Closed
6+
slug: window-kb-keep-content-when-closed
7+
tags: telerikui, blazor, window, keep, save, preserve, dom, close, disposed
8+
ticketid: 1598259
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Progress® Telerik® UI for Blazor Window<br />Progress® Telerik® UI for Blazor Dialog</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
When the `Visible` parameter is set to `false`, the Window content is disposed from the DOM. How can I keep the content in the DOM when the user closes the Window? How can I preserve the Window content upon closing? Is it possible to close or hide the Window with CSS?
27+
28+
## Solution
29+
30+
To achieve the desired result, toggle the visibility of the Window with CSS:
31+
32+
1. Create a [custom **Close** action]({%slug components/window/actions%}#custom-actions).
33+
1. Handle the [`OnClick`]({%slug button-events%}#onclick) event of the action button to apply the needed CSS.
34+
35+
The further steps will vary depending on whether or not the [Window is modal]({%slug components/window/modal%}). Only the second approach applies to the [Dialog]({%slug dialog-overview%}) as it is always modal by design.
36+
37+
For more details on the suggested approaches, refer to the following examples in the section:
38+
* [Customizing the closing action of non-modal Windows](#custom-close-for-non-modal-windows)
39+
* [Customizing the closing action of modal Windows and Dialogs](#custom-close-for-modal-windows-and-dialogs)
40+
41+
> The suggested implementations are based on hiding the Window and preserving its content in the DOM. As a result, the component is never treated as really closed and user actions such as [pressing the `Esc` key](https://demos.telerik.com/blazor-ui/window/keyboard-navigation) or [clicking the overlay of a modal Window]({%slug components/window/modal%}) will not close the Window as no **Close** command is actually defined. If needed, you have to implement the required behavior in a custom manner.
42+
43+
### Custom Close for Non-Modal Windows
44+
45+
To customize the closing of a non-modal Window:
46+
47+
1. In the `OnClick` handler of the custom **Close** action, set a custom CSS class to the Window through the `Class` parameter.
48+
1. Use this class to add the `display: none;` rule to the Window.
49+
1. Clear this class when the user opens the Window to revert the custom style and display the component.
50+
51+
````CSHTML
52+
@*Hide Window with CSS to preserve its content*@
53+
54+
@using System.ComponentModel.DataAnnotations
55+
56+
<style>
57+
.hidden-window {
58+
display: none;
59+
}
60+
</style>
61+
62+
<TelerikWindow @bind-Visible="@WindowRendered"
63+
Class="@WindowClass">
64+
<WindowTitle>
65+
Window Title
66+
</WindowTitle>
67+
<WindowContent>
68+
69+
<TelerikForm Model="@person">
70+
<FormValidation>
71+
<DataAnnotationsValidator />
72+
</FormValidation>
73+
</TelerikForm>
74+
75+
</WindowContent>
76+
<WindowActions>
77+
<WindowAction Name="CustomClose"
78+
Icon="@FontIcon.X"
79+
OnClick="@CustomCloseHandler" />
80+
</WindowActions>
81+
</TelerikWindow>
82+
83+
<TelerikButton OnClick="@OpenWindowHandler">Open Window</TelerikButton>
84+
85+
@code {
86+
private bool WindowRendered { get; set; }
87+
88+
private string WindowClass { get; set; }
89+
90+
private void CustomCloseHandler()
91+
{
92+
WindowClass = "hidden-window";
93+
}
94+
95+
private void OpenWindowHandler()
96+
{
97+
if (!WindowRendered)
98+
{
99+
WindowRendered = true;
100+
}
101+
102+
WindowClass = "";
103+
}
104+
105+
private Person person = new Person();
106+
107+
public class Person
108+
{
109+
[Required]
110+
public int Id { get; set; }
111+
112+
[Required]
113+
[Display(Name = "First Name")]
114+
public string FirstName { get; set; }
115+
116+
[Required]
117+
[Display(Name = "Last Name")]
118+
public string LastName { get; set; }
119+
120+
[Required]
121+
[Display(Name = "Date of Birth")]
122+
public DateTime? DOB { get; set; }
123+
}
124+
}
125+
````
126+
127+
### Custom Close for Modal Windows and Dialogs
128+
129+
The [modal Window]({%slug components/window/modal%}) and [Dialog]({%slug dialog-overview%}) components have a different rendering. They are wrapped in a `<div class="k-dialog-wrapper">` which contains both the component and the overlay. To allow the user to interact with the page while the Window or Dialog is hidden, you also need to hide the overlay.
130+
131+
To customize the closing of a modal Window or Dialog:
132+
133+
1. In the `OnClick` handler of the custom close action, toggle a flag to indicate the user wants to hide the Window.
134+
1. Based on this flag value, conditionally apply the `display: none;` rule to `<div class="k-dialog-wrapper">`. As a result, both the Window or Dialog and the overlay will be hidden.
135+
1. Toggle back the flag when the user opens the Window or Dialog to revert the custom style and display the component.
136+
137+
> The suggested approach prevents the application from using other modal Windows or Dialogs.
138+
139+
````CSHTML
140+
@*Hide modal Window with CSS to preserve its content*@
141+
142+
@using System.ComponentModel.DataAnnotations
143+
144+
@if (WindowHidden)
145+
{
146+
<style>
147+
.k-dialog-wrapper {
148+
display: none;
149+
}
150+
</style>
151+
}
152+
153+
<TelerikWindow @bind-Visible="@WindowRendered"
154+
Modal="true">
155+
<WindowTitle>
156+
Window Title
157+
</WindowTitle>
158+
<WindowContent>
159+
160+
<TelerikForm Model="@person">
161+
<FormValidation>
162+
<DataAnnotationsValidator />
163+
</FormValidation>
164+
</TelerikForm>
165+
166+
</WindowContent>
167+
<WindowActions>
168+
<WindowAction Name="CustomClose"
169+
Icon="@FontIcon.X"
170+
OnClick="@CustomCloseHandler" />
171+
</WindowActions>
172+
</TelerikWindow>
173+
174+
<TelerikButton OnClick="@OpenWindowHandler">Open Window</TelerikButton>
175+
176+
@code {
177+
private bool WindowRendered { get; set; }
178+
179+
private bool WindowHidden { get; set; }
180+
181+
private void CustomCloseHandler()
182+
{
183+
WindowHidden = true;
184+
}
185+
186+
private void OpenWindowHandler()
187+
{
188+
if (!WindowRendered)
189+
{
190+
WindowRendered = true;
191+
}
192+
193+
WindowHidden = false;
194+
}
195+
196+
private Person person = new Person();
197+
198+
public class Person
199+
{
200+
[Required]
201+
public int Id { get; set; }
202+
203+
[Required]
204+
[Display(Name = "First Name")]
205+
public string FirstName { get; set; }
206+
207+
[Required]
208+
[Display(Name = "Last Name")]
209+
public string LastName { get; set; }
210+
211+
[Required]
212+
[Display(Name = "Date of Birth")]
213+
public DateTime? DOB { get; set; }
214+
}
215+
}
216+
````

0 commit comments

Comments
 (0)