986121- IE Blazor UG correction based on shared prompt

Author: DhinaSF4211

blazor/image-editor/how-to/render-dialog.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Clear an Image with Blazor Image Editor Component | Syncfusion
-description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+title: Render Image Editor in a Dialog Component | Syncfusion
+description: Render the Blazor Image Editor in a modal dialog for a focused, space-saving editing experience in Blazor Server and WebAssembly applications.
 platform: Blazor
 control: Image Editor
 documentation: ug
 ---
 
 # Render Image Editor in Dialog Component
 
-Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page.
+Rendering the Image Editor in a dialog displays the component within a modal window, enabling image editing in a pop-up interface. This approach helps maintain a clean layout and provides a focused editing experience without navigating away from the current page.
 
 ```cshtml
 @using Syncfusion.Blazor.ImageEditor
@@ -23,44 +23,45 @@ Rendering the Image Editor in a dialog involves displaying the image editor comp
         <SfButton OnClick="OpenDialogAsync">Open Image</SfButton>
     }
 </div>
- <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
+
+<SfDialog MinHeight="400px" Width="340px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
     <DialogTemplates>
         <Content>
             <div class="dialogContent">
-                <SfImageEditor @ref="ImageEditor" Height="400px">
+                <SfImageEditor @ref="ImageEditor" Height="300px">
                 </SfImageEditor>
             </div>
         </Content>
     </DialogTemplates>
     <DialogEvents OnOpen="@BeforeDialogOpen" Opened="OpenAsync" Closed="@DialogClosed"></DialogEvents>
-
 </SfDialog>
 
 @code {
     private bool Visibility { get; set; } = false;
     private bool ShowButton { get; set; } = true;
-    SfImageEditor ImageEditor; 
+    SfImageEditor ImageEditor;
 
-    private async void OpenDialogAsync() 
-    { 
+    private void OpenDialogAsync()
+    {
         this.Visibility = true;
     }
 
-    private async void OpenAsync() 
-    { 
-        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); 
+    private async void OpenAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
+        ImageEditor.RefreshAsync();
     }
 
-    private void BeforeDialogOpen(BeforeOpenEventArgs args)
+    private void BeforeDialogOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args)
     {
         this.ShowButton = false;
     }
 
-    private void DialogClosed(CloseEventArgs args)
+    private void DialogClosed(Syncfusion.Blazor.Popups.CloseEventArgs args)
     {
         this.ShowButton = true;
     }
 }
 ```
 
-![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-dialog.jpg)
+![Blazor Image Editor rendered in a dialog](../images/blazor-image-editor-dialog.jpg)