How to display a picture on the base64 Grid column in JavaScript application?
You can display base64 string value as an image in JavaScript Grid columns by using the ‘column.template’ property and ‘queryCellInfo’ event of Grid component.
This is explained in the following sample code in which the ‘template’ property has been set with an “img” tag to the base64 column. And 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
I hope you enjoyed learning about how to display a picture on the base64 Grid column in JavaScript.
You can refer to our JavaScript Grid feature tour page to know 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, Direct-Trac, or feedback portal. We are always happy to assist you!
