I am new to Angular Kendo UI and I have am going through Kendo UI Grid System on the website .
My grid data has reports with name, date and link as below:
gridData: IReport[] = [
{
"date": "9/5/2018",
"reportName": "Report 1",
"reportLink": "http://google.com/",
"reportStatus": "Success"
},
{
"date": "9/7/2018",
"reportName": "Report 2",
"reportLink": "http://yahoo.com/",
"reportStatus": "Success"
},
{
"date": "8/5/2018",
"reportName": "Report 3",
"reportLink": "http://msn.com/",
"reportStatus": "Success"
},]
I want to display this grid on UI with reportLink as a hyperlink. This is how my html looks:
<kendo-grid [resizable]="true" [data]="gridData" [height]="500">
<kendo-grid-column field="date" title="Date" width="40">
</kendo-grid-column>
<kendo-grid-column field="reportName" title="Report Name" width="50">
</kendo-grid-column>
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem *ngFor="let data of gridData">
<a href="{{data.reportLink}}">{{data.reportLink}}</a>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="reportStatus" title="Report Status" width="80">
</kendo-grid-column>
</kendo-grid>
I display the link I am looping through gridData and displaying it as tag.
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem *ngFor="let data of gridData">
<a href="{{data.reportLink}}">{{data.reportLink}}</a>
</ng-template>
</kendo-grid-column>
My issue is that the report link only shows http:google.com for all the report.
What am I doing wrong? I expect to see google.com, yahoo.com and msn.com as my report links.
Any pointers? Thanks all!
Try binding directly to dataItem. You do not need the *ngFor.
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem>
<a [href]="dataItem.reportLink">{{dataItem.reportLink}}</a>
</ng-template>
</kendo-grid-column>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.