Following code is being used:
<dx-data-grid [dataSource]="openCasesdatasource" [showBorders]="true">
<dxi-column dataField="Picture" cellTemplate="cellTemplate"></dxi-column>
<div *dxTemplate="let data of 'cellTemplate'"><a [href]="data.url"></a></div>
</dx-data-grid>
This is the data which need to be displayed:
let abc: abc[] = [{
"picture": "harry",
"active": "true",
"url": "https://google.com"}]
HTML
<dx-data-grid
[dataSource]="openCasesdatasource"
[showBorders]="true"
(onCellClick)="openPicture($event)">
<dxi-column dataField="Picture" cellTemplate="cellTemplate">
<div *dxTemplate="let data of 'cellTemplate'">
<img src="data.value">
</div>
</dxi-column>
</dx-data-grid>
TS
openPicture(){
if (e.rowType == "data" && e.column.dataField === "Picture") {
if(e.value != null) {
window.open(e.value, "_blank");
}
}
}