Images in MVC EJ2 Grid

[Eddie Willcox]

Hi,

I am looking to render an EJ2 grid in ASP.Net MVC images. The grid will list my products and I need to show the product images per product. The images will be saved with the product code as their names.

[Sujith Kumar Rajkumar]

Hi Eddie, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to render images in the Grid columns. You can achieve this requirement by using Grid’s column template functionality which allows to display custom elements in Grid cells. 

 

This is demonstrated in the below code snippet where the image’s base64 string value stored in Grid data is used for rendering images in column template, 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 

{ 

    col.HeaderText("Image").Template("template").Width("120").Add(); 

}).Render() 

 

<script id="template" type="text/x-template"> 

    <div class="image"> 

        <img src="data:image/jpg;base64,${Image}" alt="${CustomerID}" /> 

    </div> 

</script> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169078/ze/GridWithColumnTemplate-732287741 

 

Note: In the above sample we have stored image’s base64 value in Grid’s data field and used that to render image in columns. You can use similar template approach to render images in column with your image data. 

 

More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#column-template 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Eddie Willcox]

Thank you. This worked perfectly

[Sujith Kumar Rajkumar]

Hi Eddie, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 

Sujith R