How to display a picture on base64 Grid column in JavaScript Grid?

This article explains how to display a picture in a Base64 Grid column in a JavaScript Grid. You can display a Base64 string value as an image in our JavaScript Grid columns by using the ‘column.template’ property and the ‘queryCellInfo’ event of the Grid component.

This is explained in the following sample code, in which the ‘template’ property has been set with an “img” tag for the base64 column. Inside the ‘queryCellInfo’ event handler, the Base64 string is bound to the column template element (i.e. <img>) to display the image.

CSHTML

 
<ejs-grid id="Grid" dataSource="@ViewBag.data" queryCellInfo="queryCellInfo" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CityFlag" headerText="Flag" template="<img class='tempimg'>" width="120"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
        <e-grid-column field="PayGrade" headerText="Pay Grade" width="150"></e-grid-column>
        <e-grid-column field="ShipID" headerText="Ship ID" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

JS

<script>
    function queryCellInfo(args) { // Grid queryCellInfo event handler
        if (args.column.field == "CityFlag") {
            args.cell.querySelector('img').setAttribute('src', 'data:image/png;base64 ,' + args.data.CityFlag);
        }
    }
</script>

Output:

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/displayBase64Val-871394573 

 Conclusion 

We hope you enjoyed learning about how to display a picture on base64 Grid column in the JavaScript Grid.

You can refer to our JavaScript Grid feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Grid examples to understand how to present and manipulate data. 

For current customers, you can check out our JavaScript Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our JavaScript Grid and other JavaScript controls. 

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!