Using ImageEditor inside Grid edit.mode.dialog

Question

I have a DataGrid set for editing inside a dialog and inside that dialog I have placed an ImageEditor. Two unexpected behaviors occur. First, image dropzone works fine but when I attempt to load an image from file explorer the browse button redirects to my homepage. Second, when an image is preloaded from code there is no image displayed even though the image is loaded, which I can see when I use the save feature inside the ImageEditor. These behaviors do not occur when placed outside of the dialog. I'm using VS2022, net 8.0, and fully updated Syncfusion components. Here is my code:@page "/Ingredient"@rendermode InteractiveServer@inject IngredientService data;Ingredients@**@@code{SfGrid? Grid;private BlazorCookbook.Data.Image image;private SfImageEditor imageEditor;string AllowedExtensions = ".jpeg, .jpg, .png";private DialogSettings DialogParams = new DialogSettings { MinHeight = "fit-content", Width = "30%", CssClass = "img-edit-wrapper" };private List customToolbarItem = new List(){new ImageEditorToolbarItemModel { Name = "Crop" },new ImageEditorToolbarItemModel { Name = "Confirm" },new ImageEditorToolbarItemModel { Name = "Reset" }};private async void OpenAsync(){if(image == null){//hide the toolbar//load image from uploader}else{await imageEditor.OpenAsync("../images/image1.jpg");}}private void QuickAccessToolbarOpening(QuickAccessToolbarEventArgs args){args.ToolbarItems = new List() { new ImageEditorToolbarItemModel { Name = "Clone" } };}public class CustomAdaptor : DataAdaptor{public IngredientService data;public CustomAdaptor(IngredientService data)}}

Buvana Sathasivam · Accepted Answer

Hi Philip,We have included the fix for the issue “Browser here option of drop area of image editor not working when image editor small width space” with our package version “28.2.5”. Therefore, we recommend upgrading to our latest version to resolve the current issue. Rootcause: While binding the click event for the drop-area browser here anchor tag, we didn't check which anchor was displayed in the image editor. So the click event was bound to display none anchor instead displayed anchor while short width space.Regards,Buvana S

YuvanShankar Arunagiri · Answer

Hi Philip,Sorry for the delay. Query 1: but when I attempt to load an image from file explorer the browse button redirects to my homepage?We have checked and confirmed the issue as “Browser here option of drop area of image editor not working when image editor small width space" and logged a defect report. We will include the fix for this issue in the upcoming weekly patch release scheduled for the first week of February 2025.Feedback link: https://www.syncfusion.com/feedback/64869/browser-here-option-of-drop-area-of-image-editor-not-working-when-image-editor You will be informed regarding this once the fix is published.Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”Query 2: when an image is preloaded from code there is no image displayed?Using the Created event of image editor with await task delay, we can load the image in dialog image editor. Refer to the below code snippet and attached sample. … private async Task OpenAsync(Order item) { if (item.Image == null) { //hide the toolbar //load image from uploader await Task.Delay(500); await imageEditor.RefreshAsync(); } else { await Task.Delay(500); await imageEditor.OpenAsync("/Image/bridge.jpg"); } } Note: Before the dialog component was visible to the DOM, the image editor started rendering action. Due to this reason, the image loaded through the OpenAsync method on the Created event was not loaded properly.Please get back to us if you need any further assistance on this.Regards,YuvanShankar A

Philip · Answer

Thank you so much! The element is working properly now.

Buvana Sathasivam · Answer

Hi Phillip,You're welcome! Please let us know if you need any further
assistance.

Regards,Buvana S