1. Home
  2. Forum
  3. Blazor
  4. How to close Insert Image Dialog from code

How to close Insert Image Dialog from code

Hi,
is there a way to close the Insert Image Dialog Box from code? If I cancel the ImageSelected event how can I programmaticaly close then dialog?

Thanks 

2 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team April 7, 2021 12:04 PM UTC

Hi Lorella, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query and have considered “Provide support to close Image, Table, and Link insert dialogs using public method” as a feature request from our end and logged the report for the same and the fix will be included in our 2021 Volume 2 releases.  
  
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/24004 
 
Meanwhile, you can use the below workaround solution. This can be achieved by closing the dialog using the JsInterop concept. We have prepared a sample for your reference, 
 
Code Snippet:   
   
_Host.cshtml  
 
<head> 
    . . . 
    <script src="~/jsinterop.js"></script> 
</head> 
   
Index.razor   
 
<SfRichTextEditor @ref="@rteObj">  
    <RichTextEditorEvents OnImageSelected="@ImageSelectedEventHandler"></RichTextEditorEvents> 
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p> 
</SfRichTextEditor> 
 
<style> 
    .e-img-content .e-linkheader, .imgUrl { 
        display: none; 
    } 
</style> 
 
@code { 
    SfRichTextEditor rteObj; 
    [Inject] 
    IJSRuntime JsRuntime { get; set; } 
 
    private bool dialogHide { get; set; } = true; 
 
    public void ImageSelectedEventHandler(Syncfusion.Blazor.Inputs.SelectedEventArgs args) 
    { 
        if (dialogHide) 
        { 
            args.Cancel = true; 
            var currentID = this.rteObj.ID + "_image"; 
            JsRuntime.InvokeAsync<string>("RichTextEditor.dialogClose", currentID); 
        } 
 
    } 
} 
   
jsinterop.js   
window.RichTextEditor = { 
    dialogClose: function (imageDialog) { 
        document.getElementById(imageDialog).blazor__instance.hide(); 
    } 
} 
   
   
Please check the above code snippet and the sample and let us know if it satisfies your requirement.  
  
Regards,  
Revanth  


RK Revanth Krishnan Syncfusion Team July 2, 2021 10:58 AM UTC

Hi Lorella, 
 
We are glad to announce that our Essential Studio 2021 Volume 2 Release v19.2.0.44  is rolled out and is available for download under the following link. 
 
We have included the feature “Provide support to close Image, Table, and Link insert dialogs using public method” with the package version 19.2.44. 
Can you please upgrade your package to this version to use this feature? 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards,  
Revanth

Marked as answer
Loader.
Up arrow icon