Template Column image disappears when editing row

[Eddie Willcox]

Hi,

On my page I am rendering a grid. One of the columns is to a template column which loads images. The grid edit mode is set to Normal.

When I edit a row, the image in the template column goes away. If the edit mode is set to Batch, the image remains in view.

Is this default functionality of Grid? If so, is there a way to ensure that the image remains in view while editing the row?

[Pon Selva Jeganathan]

Hi Eddie,   

 

We are working on this query with high priority, and we will update further details by tomorrow(4^th February, 2022). Until then we value your patience 

 

Regards,  

Pon selva  

[Vignesh Natarajan]

Hi Eddie,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is this default functionality of Grid? If so, is there a way to ensure that the image remains in view while editing the row?” 

 

Yes, this is default functionality of Grid with template column and editing. We suggest you to achieve your requirement using CellEdit Template feature of GridColumn. It is used to render custom component in column while editing a record. Here we suggest you to render image similarly to template column.  

 

Refer the below code example.  

 

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col => 

{ 

   col.HeaderText("Employee Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#template").Width("150").Add(); 

   col.Field("EmployeeID").HeaderText("Employee ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

   col.Field("FirstName").HeaderText("Name").Width("125").Add(); 

   col.Field("LastName").HeaderText("Title").Width("170").Add(); 

   col.Field("BirthDate").HeaderText("Hire Date").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); 

   col.Field("Country").HeaderText("ReportsTo").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

 

 

}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

</div> 

<style> 

    .image img { 

        height: 55px; 

        width: 55px; 

        border-radius: 50px; 

        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2); 

    } 

</style> 

<script> 

    var elem; 

    var imgObject; 

    function create(args) { 

        imgObject = document.createElement('div'); 

        imgObject.classList.add("image"); 

        return imgObject; 

    } 

    function write(args) { 

        elem = document.createElement('img'); 

        elem.src = "/Content/images/Employees/" + args.rowData.EmployeeID + ".png"; 

        imgObject.appendChild(elem); 

    } 

 

    function destroy() { 

        imgObject.remove(); 

    } 

    function read(args) { 

        return ""; 

    } 

</script> 

 

Kindly refer the sample below for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172510/ze/Grid_Editing1509746869.zip 

 

Refer the below documentation for your reference 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#cell-edit-template 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Eddie Willcox]

Thank you. This works perfectly

[Balaji Sekar]

Hi Eddie, 

Thanks for your update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Balaji Sekar.