Edit grid not render Image

Hi,

As per the screen shot code ; while  editing country my image is not viewing.GridEdit.png


4 Replies

NS Niha Shaikh December 3, 2021 09:15 AM UTC

So as per below image its not viewing Image. Code is https://blazor.syncfusion.com/documentation/datagrid/editing#using-autocomplete-in-edittemplate and i just added one column having 

<GridColumn HeaderText="Action" Width="20" AllowEditing="false" AllowAdding="false">

            <Template>

                <img src="https://picsum.photos/200/300" height="50" alt="test" />

            </Template>

        </GridColumn>

missingImage.png



JP Jeevakanth Palaniappan Syncfusion Team December 6, 2021 02:00 PM UTC

Hi Niha, 

Greetings from Syncfusion support. 

We have validated your query and we would like to inform you that you have used the <Template>(Column Template) which is used only to customize the elements in the UI. If you want to customize elements in edit form then you have to use the EditTemplate of the GridColumn. Please refer the below documentation for your reference. 


Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 



NS Niha Shaikh December 13, 2021 07:09 AM UTC

Hi Jeevakanth,

So my query is that I have three simple text and two sfdropdown in grid while editing the grid my sfdropdown not get render in the div. And I have used edittemplate and template both the same fields example like following code. Because if I write only edit template then it didn't get normal template and show blank the vice versa for template one.

<SfGrid DataSource="@Employees">
    <GridColumns>
        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120">
            <Template>
                @{
                    var employee = (context as EmployeeData);
                    <div class="image">
                        <img src="@($"scripts/Images/Employees/{employee.EmployeeID}.png")" alt="@employee.EmployeeID" />
                    </div>
                }
            </Template>
<EditTemplate>
                @{
                    var employee = (context as EmployeeData);
                    <div class="image">
                        <img src="@($"scripts/Images/Employees/{employee.EmployeeID}.png")" alt="@employee.EmployeeID" />
                    </div>
                }
            </EditTemplate>

        </GridColumn>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>


JP Jeevakanth Palaniappan Syncfusion Team December 14, 2021 05:27 AM UTC

Hi Nika, 

We have checked your query and we would like to inform you that Column template is used to customize elements rendered in the UI and EditTemplate is used to customize the elements rendered in the edit form. So if you want the image to display in both UI and editform then as like in your code, you have to use both Column template and EditTemplate. Please refer the below documentation for your reference. 


Incase if you are still facing any problem then kindly share us the below details, 

  1. Share more information on the problem you are facing.
  2. Share us the video demo showing the problem you are facing.

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon