` element. Use it to [override theme styles]({%slug themes-override%}). Here is a [custom Window styling example]({%slug window-kb-custom-css-styling%}). |
+| `Size` | `string` | Sets a predefined Window **width**. Use the string members of the static class `ThemeConstants.Window.Size` - `Small`, `Medium`, and `Large`. They translate to widths of `300px`, `800px` and `1200px`, respectively. If set, the `Width` parameter will take precedence over `Size`. |
+| `Visible` | `bool` | Defines if the Window is rendered and visible on the page. |
-
## Important Notes
-The Telerik Window component renders as a child of the `TelerikRootComponent` at the root of your app. This is required so it can show up and have correct positions without being affected and broken by parent elements and their CSS rules.
+The Telerik Window component renders as a child of the `TelerikRootComponent` at the root of the Blazor app. This is required, so it can show over the other page content, and have correct position.
-In Blazor, however, the render tree structure may be important in some cases and the fact that the Window renders its contents in a different place may put you in one of the following situations:
+In Blazor, however, the render tree structure may be important. In some cases, the special Window placement may put you in one of the following situations:
-* [Returning data from a window does not update the parent]({%slug window-does-not-update-parent%})
-* [CascadingParameter Value is null in Window]({%slug window-cascading-parameter-null%})
-* [Using an EditContext for a form holding a window requires updating the EditContext]({%slug window-in-form-edit-context%})
+* [Returning data from a Window does not update the parent]({%slug window-does-not-update-parent%})
+* [CascadingParameter Value is null in the Window]({%slug window-cascading-parameter-null%})
+* [Using an EditContext for a form holding a Window requires updating the EditContext]({%slug window-in-form-edit-context%})
* [Block all content with a Window]({%slug window-kb-block-all-content%})
+
## See Also
- * [Live Demos: Window](https://demos.telerik.com/blazor-ui/window/index)
- * [Window Size, Maximize, Minimize]({%slug components/window/size%})
- * [Window Actions]({%slug components/window/actions%})
- * [Window Events]({%slug window-events%})
- * [Window Position]({%slug components/window/position%})
- * [Modal Window]({%slug components/window/modal%})
+* [Live Demos: Window](https://demos.telerik.com/blazor-ui/window/index)
+* [Window Size, Maximize, Minimize]({%slug components/window/size%})
+* [Window Actions]({%slug components/window/actions%})
+* [Window Events]({%slug window-events%})
+* [Window Position]({%slug components/window/position%})
+* [Modal Window]({%slug components/window/modal%})
diff --git a/components/window/position.md b/components/window/position.md
index a2929d4e3b..f64210b80e 100644
--- a/components/window/position.md
+++ b/components/window/position.md
@@ -12,7 +12,7 @@ position: 2
The Window offers two ways for you to control its position:
-* the `Top` and `Left` properties (read more in the [Dimensions]({%slug common-features/dimensions%}) article)
+* the `Top` and `Left` properties (read more about the possible values in the [Dimensions]({%slug common-features/dimensions%}) article)
* the `Centered` boolean property
>caption Set Top and Left offset to the Window
@@ -30,7 +30,7 @@ The Window offers two ways for you to control its position:
The `Centered` property adds a CSS class that sets the window position to `top: 50%; left: 50%; transform: translate(-50%, -50%);`. This keep is it centered if the viewport size changes.
-If the `Top` and/or `Left` properties are set, they will take precedence, because they render as rules in an inline `style` attribute.
+If the `Top` or `Left` properties are set, they will take precedence, because they render as rules in an inline `style` attribute.
>tip The `Centered` parameter is `true` by default.
diff --git a/components/window/size.md b/components/window/size.md
index 03048416a5..2e65fea433 100644
--- a/components/window/size.md
+++ b/components/window/size.md
@@ -1,6 +1,6 @@
---
title: Size
-page_title: Window - Size
+page_title: Window Size
description: How to control size of the Window for Blazor.
slug: components/window/size
tags: telerik,blazor,window,size
@@ -10,43 +10,74 @@ position: 1
# Window Size
-The Window offers different ways for you to control its size:
+The Window offers different features to control its size:
-* [Set Width and Height](#set-width-and-height)
+* [Width and Height](#width-and-height), together with min/max parameters
* [Maximize and Minimize](#maximize-and-minimize)
+* [User resizing](#resizing)
-## Set Width and Height
+## Width and Height
-If you know the size you need, just set it to the `Width` and/or `Height` parameters. They can take valid CSS values (see the [Dimensions]({%slug common-features/dimensions%}) article).
+If you know the size you need, just set the `Width` or `Height` parameters. They can take valid CSS values (see the [Dimensions]({%slug common-features/dimensions%}) article).
->note If you do not set dimensions, no `width` and `height` CSS rules will be set, and the browser will render the Window element with dimensions according to its contents, like any other `
` element. This may adversely affect [positioning](position).
->
-> When you set dimensions, content larger than those dimensions will produce scrollbars in the window.
+The Window also provides parameters that control its dimensions in a more flexible way:
->caption Set Width and Height to a Window
+* `MinHeight`
+* `MaxHeight`
+* `MinWidth`
+* `MaxWidth`
+
+Min/max dimensions take precedence over [user resizing](#resizing) and `Width` / `Height` settings.
+
+If no dimensions are set, the Window will expand, according to its contents, like any other `
` element. This may affect the [Window's positioning]({%slug components/window/position%}).
+
+If you set dimensions and the Window content does not fit, scrollbars will show.
+
+>caption Configure Window Width and Height, and min/max dimensions
````CSHTML
-
-
- The Title
-
-
- I am 600px wide and 400px tall because my developer told me so.
-
+
+
+ Window Title
+
+
+ The default width is 600px. The user can resize from 400px to 800px.
+ The default height is 300px. The user can resize from 200px to 400px.
+
+
+@code {
+ bool WindowIsVisible { get; set; } = true;
+}
````
## Maximize and Minimize
The user can maximize and minimize the Window through [action buttons in its titlebar]({%slug components/window/actions%}).
-The developer can invoke those actions through binding the `State` parameter. It takes a member of the `Telerik.Blazor.WindowState` enum:
-* `Default` - the size and position as defined by the `Top`, `Left`, `Centered`, `Width`, `Height`, `Size` parameters.
-* `Minimized` - the window is just a narrow titlebar and does not render its content.
-* `Maximized` - the window takes up the entire viewport.
+You can invoke those actions by setting the `State` parameter. It takes a member of the `Telerik.Blazor.WindowState` enum:
+
+
+
+| `WindowState` Value | Description |
+| --- | --- |
+| `Default` | The size and position will depend on the `Top`, `Left`, `Centered`, `Width`, `Height`, `Size` parameters. |
+| `Minimized` | The Window will show its titlebar only. The component will dispose its content and remove it from the page DOM. If you prefer to just hide the Window content with CSS, [set `PersistContent` to `true`]({%slug window-overview%}#window-parameters). |
+| `Maximized` | The Window will take up the entire viewport. |
->caption Maximize, Minimze and Restore the Window programmatically
+>caption Maximize, Minimize and Restore the Window programmatically
````CSHTML
@* The user actions also change the state when two-way binding is used *@
@@ -83,6 +114,42 @@ The developer can invoke those actions through binding the `State` parameter. It
>tip With a maximized window you may want to ensure all other content stays "behind" it. To do that, see the [Block all content with a Window]({%slug window-kb-block-all-content%}) article on ensuring that the CSS rules in the project can enable that.
+
+## Resizing
+
+By default, the Window is resizable. Window resizing can be controlled with [min/max Window dimensions](#width-and-height).
+
+To disable resizing, set the `Resizable` parameter to `false`.
+
+>caption Window Resizing
+
+````CSHTML
+@* Toggle the resizable parameter through a button *@
+
+Toggle Resizable
+
+
+
+ Lorem ipsum
+
+
+
+
+
+
+
+ This is my window popup content.
+
+
+
+@code {
+ public bool WindowResizable { get; set; } = true;
+ public bool WindowVisible { get; set; } = true;
+}
+````
+
+
## See Also
- * [Live Demo: Window Size](https://demos.telerik.com/blazor-ui/window/dimensions)
+* [Live Demo: Window Size](https://demos.telerik.com/blazor-ui/window/dimensions)
diff --git a/getting-started/vs-code-integration/snippets.md b/getting-started/vs-code-integration/snippets.md
index c3cbe708b4..eeccd10a62 100644
--- a/getting-started/vs-code-integration/snippets.md
+++ b/getting-started/vs-code-integration/snippets.md
@@ -102,5 +102,5 @@ To use the **Telerik UI for Blazor Code Snippets**, install the Telerik UI for B
| tb-treelistcolumn-locked | [TreeList with Frozen Column]({%slug treelist-columns-frozen%}) |
| tb-treeview | [TreeView]({%slug treeview-overview%}) |
| tb-upload | [Upload]({%slug upload-overview%}) |
-| tb-window | [Window]({%slug components/window/overview%}) |
+| tb-window | [Window]({%slug window-overview%}) |
| tb-wizard | [Wizard]({%slug wizard-overview%}) |
diff --git a/knowledge-base/confirm-button-click-message-box.md b/knowledge-base/confirm-button-click-message-box.md
index 72b4bb64c0..70d70bfc98 100644
--- a/knowledge-base/confirm-button-click-message-box.md
+++ b/knowledge-base/confirm-button-click-message-box.md
@@ -19,7 +19,7 @@ Sometimes user actions can be sensitive or result in data deletion. For such cas
UI for Blazor includes [Alert, Confirm and Prompt popup dialogs]({%slug dialog-predefined%}), which can be used to interact with the user.
-Another option is to use the [Window component]({%slug components/window/overview%}), if the predefined Dialogs do not provide enough flexibility for a specific scenario. Here are two examples:
+Another option is to use the [Window component]({%slug window-overview%}), if the predefined Dialogs do not provide enough flexibility for a specific scenario. Here are two examples:
* [https://github.com/telerik/blazor-ui/tree/master/common/confirm-button](https://github.com/telerik/blazor-ui/tree/master/common/confirm-button)
* [https://github.com/telerik/blazor-ui/tree/master/common/message-box](https://github.com/telerik/blazor-ui/tree/master/common/message-box)
diff --git a/knowledge-base/grid-edit-on-row-double-click.md b/knowledge-base/grid-edit-on-row-double-click.md
index 192bbf3701..1812752900 100644
--- a/knowledge-base/grid-edit-on-row-double-click.md
+++ b/knowledge-base/grid-edit-on-row-double-click.md
@@ -27,7 +27,7 @@ I would like to edit a row in the Grid when the user clicks or double-clicks on
## Solution
-The Grid exposes two events that allows you to respond to the user clicking on its rows - [OnRowClick]({%slug grid-events%}#onrowclick) and [OnRowDoubleClick]({%slug grid-events%}#onrowdoubleclick). You can use either one of them together with the [Window]({%slug components/window/overview%}) to create a custom popup form on a click of a row.
+The Grid exposes two events that allows you to respond to the user clicking on its rows - [OnRowClick]({%slug grid-events%}#onrowclick) and [OnRowDoubleClick]({%slug grid-events%}#onrowdoubleclick). You can use either one of them together with the [Window]({%slug window-overview%}) to create a custom popup form on a click of a row.
>caption Use the OnRowDoubleClick event to put the Grid in Edit mode
diff --git a/knowledge-base/grid-rows-text-ellipsis.md b/knowledge-base/grid-rows-text-ellipsis.md
index 91d407e8a8..c93f33ca29 100644
--- a/knowledge-base/grid-rows-text-ellipsis.md
+++ b/knowledge-base/grid-rows-text-ellipsis.md
@@ -31,7 +31,7 @@ In order to prevent the Grid from wrapping the text in multiple lines you can us
>note You can achieve the same behavior if you use the [Template]({%slug grid-templates-column%}) instead of the OnCellRender event. If you choose to go for the `Template` approach you should wrap the `(context as ).FieldName` into a HTML element and add the CSS class to the `class` attribute of that element.
-You might still want to allow the user to see the whole content, so you can enable the `Resizable` parameter of the Grid. If, however, the content is too long, the user should resize a lot in order to see the cell content. To cover such scenario, you can display the full content in a separate container. One option would be to use a [Window component]({%slug components/window/overview%}) and handle some of the Grid events to display it ([`OnRowClick`]({%slug grid-events%}#onrowclick), [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick)). Another approach is to show a Tooltip on hover of the cell (similar example is available in [Tooltip in Grid]({%slug tooltip-kb-in-grid%}) knowledge base article). The solution below showcases a sample implementation of the first mentioned approach - using a Window component and handling the `OnRowDoubleClick` event.
+You might still want to allow the user to see the whole content, so you can enable the `Resizable` parameter of the Grid. If, however, the content is too long, the user should resize a lot in order to see the cell content. To cover such scenario, you can display the full content in a separate container. One option would be to use a [Window component]({%slug window-overview%}) and handle some of the Grid events to display it ([`OnRowClick`]({%slug grid-events%}#onrowclick), [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick)). Another approach is to show a Tooltip on hover of the cell (similar example is available in [Tooltip in Grid]({%slug tooltip-kb-in-grid%}) knowledge base article). The solution below showcases a sample implementation of the first mentioned approach - using a Window component and handling the `OnRowDoubleClick` event.
````CSHTML
diff --git a/knowledge-base/window-custom-css-styling.md b/knowledge-base/window-custom-css-styling.md
new file mode 100644
index 0000000000..8115621e91
--- /dev/null
+++ b/knowledge-base/window-custom-css-styling.md
@@ -0,0 +1,69 @@
+---
+title: Custom Window CSS Styling
+description: How to apply custom CSS styles to the Telerik Blazor Window component.
+type: how-to
+page_title: How to Apply Custom Window CSS Styling
+slug: window-kb-custom-css-styling
+position:
+tags: telerik, blazor, window, styling
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+
+
+ | Product |
+ Window for Blazor |
+
+
+
+
+
+## Description
+
+How to set custom CSS styles to the Window?
+
+## Solution
+
+The Window `Class` parameter lets you define a CSS class that will be rendered on the popup element. You can cascade through it in order to change the appearane of both the content, and the built-in elements of the Window.
+
+Use CSS selectors with higher specifity to customize the looks of the Window. See [how to override the Telerik Blazor theme]({%slug themes-override%}) for more tips.
+
+>caption Use a Class to change the appearance and style of the Window
+
+````CSHTML
+
+
+ Window Title
+
+
+ Window content
+
+
+
+
+````