diff --git a/blazor/dialog/images/blazor-dialog-state-persistent.gif b/blazor/dialog/images/blazor-dialog-state-persistent.gif new file mode 100644 index 0000000000..447830a541 Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-state-persistent.gif differ diff --git a/blazor/dialog/state-persistent.md b/blazor/dialog/state-persistent.md new file mode 100644 index 0000000000..51992e2061 --- /dev/null +++ b/blazor/dialog/state-persistent.md @@ -0,0 +1,65 @@ +--- +layout: post +title: Enable State Persistence in Blazor Dialog Component +description: Checkout and learn here all about state persistence in Syncfusion Blazor Dialog component and more. +platform: Blazor +control: Dialog +documentation: ug +--- + +# Enable State Persistence in Blazor Dialog Component + +To ensure the Blazor Dialog component retains its size and position across page reloads and reopen actions, set the [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_EnablePersistence) property to `true`. Additionally, enable the [`AllowPrerender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property to maintain the dialog's DOM elements even when it is hidden. + +By default, `AllowPrerender` is set to `false`, which means the dialog's DOM elements are removed when hidden and re-rendered upon showing. Setting it to `true` retains the dialog's elements in the DOM, preserving its state such as position and size between show/hide operations. + +## Example: Persistent Dialog + +The following code demonstrates how to configure a dialog with state persistence: + + +```razor + +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
Dialog header
+ + Dialog State Persistence + +
+ + + + +
+ +@code { + SfDialog DialogRef; + + private async Task OpenDialog() + { + await this.DialogRef.ShowAsync(); + } + + private async Task CloseDialog() + { + await this.DialogRef.HideAsync(); + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVIjPsCTufucdGL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +![Blazor Dialog State Persistence](./images/blazor-dialog-state-persistent.gif) \ No newline at end of file