dynamic data source with clickable link in the cell?

[Ting]

Can someone help with my question?

I have a grid with dynamic data source based on user's selection. All data source has one common field: photo. I have photo's url showing up in the grid. what I need is make this url as clickable. Or another option is, make this photo column a button field with text of "View Photo", so user can click it and open up in a new blank page to view the photo. I have googled a lot but nothing really help since my data source dynamically fill in the grid. The Telerik documentation page doesn't have how to dynamical data source with clickable cell.

Here is my example code.

<kendo-grid [data]="gridData" [resizable]="true" [sortable]="{mode: 'multiple' }" [sort]="state.sort">

//the following code doesn't work. 

<kendo-grid-column >
<ng-tempalte *ngIf="field=='Photos'" >
<a href="exampleurl" target="_blank">{{dataItem}}</a>
</ng-tempalte>
</kendo-grid-column>

</kendo-grid>

[Svet]

Hi Ting,

Please use the kendoGridCellTemplate directive in order to customize the content of the column cells:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

Here is an example demonstrating how to add a custom <a> element within the content of the "ProductName" column cells:

https://stackblitz.com/edit/angular-thzn3r?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Ting]

It didn't work.  I modified my code based on the example but still no luck. I don't even see "Some image" in Photo column. D

<kendo-grid [data]="gridData">

<kendo-grid-column *ngFor="let col of dataFields" >
<ng-template *ngIf="col.ColumnName === 'Photos'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
{{dataItem[column.ColumnName]}}
<br>
<a href="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" target="_blank">Some image</a>
</ng-template>
</kendo-grid-column>

</kendo-grid>

[Svet]

Hi Ting,

We will need more information about your current Kendo UI subscription. I have therefore generated a sales lead, and you can expect our licensing specialists to contact you, or if you have any questions about obtaining a license for Kendo UI for Angular, feel free to open a separate thread.

If your company has already purchased a license from another account, please contact the license holder and provide them with this link so they can add you as a licensed developer. If you need to purchase or renew your subscription, you can reach out to our product specialists on [e-mail]. They will gladly assist you with finding both the answers to your questions and a subscription that best fits your needs.

Once your account is associated with an active subscription, you can benefit from the full benefits of the respective support plan.

About the additionally provided details, if you aren't seeing the "Some Image" text in the photo column then it seems that the ng-template isn't rendered at all. Thus, please check the evaluation of the *ngIf condition:

<ng-template *ngIf="col.ColumnName === 'Photos'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Ting]

Hi Svetlin,

My subscription has been renewed. 

With my codes, I have checked the ngif statement, and it is correct. I also tried *ngIf="col.Label === 'PhotoLabel'", and I still don't see "Some image" text. Any other thought?

Thanks.

[Svet]

Hi Ting,

Thank you for renewing your subscription.

Going through the provided additional details I don't see a [field] that is assigned to the Grid columns. Please make sure to add a field as otherwise the generated columns won't be bound to a specific property of the items and won't represent any data.

Another thing that catches my attention is the following:

<ng-template *ngIf="col.ColumnName === 'Photos'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
{{dataItem[column.ColumnName]}}

In this case the column field provides the current column instance which doesn't have a ColumnName property. Thus it seems that one of the following ways for usage were intended to be done:

          <kendo-grid-column *ngFor="let col of dataFields" [field]="col.field">
          <ng-template *ngIf="col.ColumnName === 'bar'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">

          {{dataItem[column.field]}}

          <br>

          {{col.ColumnName}}

Please check the following example demonstrating the suggestions:

https://stackblitz.com/edit/angular-thzn3r-1nim6e?file=app%2Fapp.component.ts

I hope this helps. Please let me know in case any further information or assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Ting]

Hi Svetilin,

It is still not working. My grid is dynamically filling the data from web service, so it doesn't matter I add [field] or not - I did add it but no luck. any thought?

[Dimitar]

Hello Ting,

Based on the shared details in a private support thread, I composed this example and it seems to work as expected. Could you please modify this example so that the issue is evident, fork it and send it back over so I can inspect the problem.

Thanks in advance.

Regards,
Dimitar
Progress Telerik