Merge pull request #6911 from syncfusion-content/BLAZ-983104-predefineddialog

Updated the UG Documentation for Predefined-dialogs

Author: UdhayaKumarDuraisamy

blazor/predefined-dialogs/animation.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Animation in Predefined Dialogs in Blazor
 
-The predefined dialogs can be animated during the open and close actions. You can customize the `Delay`, `Duration`, and `Effect` of animation by using the [DialogOptions.AnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AnimationSettings) property.
+The predefined dialogs (Alert, Confirm, and Prompt) support animation on open and close. Customize the animation `Delay` (ms), `Duration` (ms), and `Effect` using the [DialogOptions.AnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AnimationSettings) property of type [DialogAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogAnimationSettings.html). The `Effect` accepts values from the [DialogEffect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEffect.html) enumeration. If not specified, the dialog uses its default animation settings.
 
-In the following sample, the zoom effect is enabled. So, the dialog will open with the zoom in and close with the zoom out effect.
+In the following sample, the zoom effect (`DialogEffect.Zoom`) is used. The dialog opens with a zoom-in animation and closes with a zoom-out animation.
 
 {% tabs %}
 
@@ -27,4 +27,4 @@ In the following sample, the zoom effect is enabled. So, the dialog will open wi
 {% include_relative code-snippet/prompt-animation.razor %}
 {% endhighlight %}
 
-{% endtabs %}
+{% endtabs %}

blazor/predefined-dialogs/customization.md

@@ -11,17 +11,17 @@ documentation: ug
 
 ## Customize action buttons
 
-You can customize the predefined dialogs buttons by using below properties.
-* [DialogOptions.PrimaryButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_PrimaryButtonOptions) - Use this property to customize **OK** button text and appearence.
-* [DialogOptions.CancelButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CancelButtonOptions) - Use this property to customize **Cancel** button text and appearence.
+Customize predefined dialog buttons using the following properties:
+* [DialogOptions.PrimaryButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_PrimaryButtonOptions) - Customizes the primary (OK) button text and appearance.
+* [DialogOptions.CancelButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CancelButtonOptions) - Customizes the secondary (Cancel) button text and appearance.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the predefined dialog action buttons.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to customize predefined dialog action buttons.
 
-For alert dialog , customized the default dialog button content as `Okay` by using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
+For the alert dialog, the default button content is customized to `Okay` using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
 
-For confirm dialog, customized the default dialog buttons content as `Yes` and `No` by using the `DialogButtonOptions.Content` property and also customized the dialog button icons by using [DialogButtonOptions.IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_IconCss) property.
+For the confirm dialog, the default button content is customized to `Yes` and `No` using the `DialogButtonOptions.Content` property, and the button icons are customized using the [DialogButtonOptions.IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_IconCss) property (provide CSS class names for icons).
 
-For prompt dialog , customized the default dialog buttons content as `Connect` and `Close` by using [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
+For the prompt dialog, the default button content is customized to `Connect` and `Close` using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
 
 {% tabs %}
 
@@ -43,21 +43,21 @@ For prompt dialog , customized the default dialog buttons content as `Connect` a
 
 **Alert**
 
-![Alert action buttons Dialog](./images/blazor-alert-action-button.png)
+![Alert dialog with customized action button](./images/blazor-alert-action-button.png)
 
 **Confirm**
 
-![Confirm action buttons Dialog](./images/blazor-confirm-action-button.png)
+![Confirm dialog with customized buttons](./images/blazor-confirm-action-button.png)
 
 **Prompt**
 
-![Prompt action buttons Dialog](./images/blazor-prompt-action-button.png)
+![Prompt dialog with customized Connect and Close buttons](./images/blazor-prompt-action-button.png)
 
 ## Show or hide dialog close button 
 
-You can show or hide close button in dialog using the [DialogOptions.ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ShowCloseIcon) property.The default value is `false`.
+Show or hide the close button in predefined dialogs using the [DialogOptions.ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ShowCloseIcon) property. The default value is `false`.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the show or hide dialog close button.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to show or hide the dialog close button.
 
 {% tabs %}
 
@@ -79,21 +79,21 @@ Use the following code snippet for **alert.razor**, **confirm.razor** and **prom
 
 **Alert**
 
-![Alert close icon Dialog](./images/blazor-alert-close-button.png)
+![Alert dialog showing the close icon](./images/blazor-alert-close-button.png)
 
 **Confirm**
 
-![Confirm close icon Dialog](./images/blazor-confirm-close-button.png)
+![Confirm dialog showing the close icon](./images/blazor-confirm-close-button.png)
 
 **Prompt**
 
-![Prompt close icon Dialog](./images/blazor-prompt-close-button.png)
+![Prompt dialog showing the close icon](./images/blazor-prompt-close-button.png)
 
 ### Customize dialog content
 
-You can load custom content in predefined dialogs using the [DialogOptions.ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ChildContent) property. 
+Load custom content in predefined dialogs using the [DialogOptions.ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ChildContent) property.
 
-Use the following code to customize the dialog content and render the custom TextBox component inside the prompt dialog to obtain the username from the user using the `@bind-Value` property.
+Use the following code to customize the dialog content and render a custom TextBox component inside the prompt dialog to obtain a username from the user using the `@bind-Value` property.
 
 {% tabs %}
 {% highlight razor %}
@@ -103,4 +103,4 @@ Use the following code to customize the dialog content and render the custom Tex
 {% endhighlight %}
 {% endtabs %}
 
-![Customize Prompt Dialog](./images/blazor-customize-dialog.png)
+![Prompt dialog with custom content for username input](./images/blazor-customize-dialog.png)

blazor/predefined-dialogs/dimension.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Dimension in Predefined Dialogs in Blazor
 
-Customize the predefined dialogs dimensions using the [DialogOptions.Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Height) and [DialogOptions.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Width) properties.
+Customize predefined dialog dimensions using the [DialogOptions.Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Height) and [DialogOptions.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Width) properties.
 
-By default, the predefined dialogs `Width` and `Height` property value is set as `auto`. Depends on the dialog content the width and height values are automatically adjust. You can specify the dimension values in both pixels and percentage format to change the default dialog width and height values.
+By default, the `Width` and `Height` properties are set to `auto`. The dialog size adapts to its content when these values are not specified. Dimensions can be provided in pixels (for example, `300px`) or percentages (for example, `50%`) to override the default sizing.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the dialog dimensions.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to customize dialog dimensions.
 
 {% tabs %}
 
@@ -35,21 +35,21 @@ Use the following code snippet for **alert.razor**, **confirm.razor** and **prom
 
 **Alert**
 
-![Alert dimension Dialog](./images/blazor-alert-dimension.png)
+![Alert dialog with custom width and height](./images/blazor-alert-dimension.png)
 
 **Confirm**
 
-![confirm dimension Dialog](./images/blazor-confirm-dimension.png)
+![Confirm dialog with custom width and height](./images/blazor-confirm-dimension.png)
 
 **Prompt**
 
-![prompt dimension Dialog](./images/blazor-prompt-dimension.png)
+![Prompt dialog with custom width and height](./images/blazor-prompt-dimension.png)
 
 ## Max-width and max-height
 
-To have a restricted max-width and max-height dialog dimension, you need to specify the max-width, max-height CSS properties for the component’s container element by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property. The max-height value is calculated in source level and set to the dialog. so, need to override the max-height property.
+To constrain the dialog’s maximum size, specify `max-width` and `max-height` CSS properties for the component’s container using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property. The component may apply an inline `max-height`; to override it, use a higher-specificity selector (or `!important` if necessary).
 
-Use the following code to customize the max-width and max-height for alert dialog:
+Use the following code to customize the max-width and max-height for the alert dialog:
 
 {% tabs %}
 {% highlight razor %}
@@ -59,13 +59,13 @@ Use the following code to customize the max-width and max-height for alert dialo
 {% endhighlight %}
 {% endtabs %}
 
-![Max width and height](./images/blazor-max-width-height.png)
+![Dialog constrained with max width and max height](./images/blazor-max-width-height.png)
 
 ## Min-width and min-height
 
-To have a restricted min-width and min-height dialog dimension, you need to specify the min-width, min-height CSS properties for the component’s container element by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property.
+To ensure a minimum dialog size (for example, to keep action buttons visible), specify `min-width` and `min-height` CSS properties for the component’s container using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property.
 
-Use the following code to customize the min-width and min-height for alert dialog:
+Use the following code to customize the min-width and min-height for the alert dialog:
 
 {% tabs %}
 {% highlight razor %}
@@ -75,4 +75,4 @@ Use the following code to customize the min-width and min-height for alert dialo
 {% endhighlight %}
 {% endtabs %}
 
-![Min width and height](./images/blazor-min-width-height.png)
+![Dialog constrained with min width and min height](./images/blazor-min-width-height.png)

blazor/predefined-dialogs/draggable.md

@@ -1,15 +1,17 @@
 ---
 layout: post
 title: Draggable in the Predefined Dialogs in Blazor | Syncfusion
-description: Check out and learn here all about draggable in the predefined dialogs and much more details.
+description: Learn how to enable draggable behavior for predefined dialogs in Blazor, including alert, confirm, and prompt dialog examples.
 platform: Blazor
 control: Predefined Dialogs
 documentation: ug
 ---
 
 # Draggable in Predefined Dialogs
 
-The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using the [DialogOptions.AllowDragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AllowDragging) property.
+Predefined dialogs support dragging by the dialog header, allowing users to reposition the dialog within its target container. Enable this behavior using the [DialogOptions.AllowDragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AllowDragging) property. The default value is `false`. Dragging requires a visible header; if the header is hidden or replaced, dragging behavior may be affected.
+
+The following examples demonstrate enabling dragging for Alert, Confirm, and Prompt dialogs.
 
 {% tabs %}
 
@@ -25,4 +27,4 @@ The predefined dialogs supports dragging within its target container by grabbing
 {% include_relative code-snippet/prompt-drag.razor %}
 {% endhighlight %}
 
-{% endtabs %}
+{% endtabs %}