Kendo UI Angular - How to display a regular hyperlink (underlined and blue) in grid?

Question

I want to display hyperlinks within a grid of Kendo UI for Angular. Sometimes the simplest of things are the hardest to do...

Here is my column:

<kendo-grid-column field="number" title="Number">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <a href='{{azureStorageBaseUrl}}/invoices/{{dataItem.number}}.pdf' target="_blank">{{dataItem.number}}</a>
      </ng-template>
</kendo-grid-column>

I'd like the 'number' to be blue and underlined as a regular hyperlink but it's just black and not underlined.

Answer 1

            <kendo-grid-column field='Number' title='Number' width='120'>
                <ng-template kendoGridCellTemplate let-dataItem >
                  <a href="javascript:void(0)" (click)="clickEvent(dataItem.number)">{{dataItem.number}}</a>
                </ng-template>
              </kendo-grid-column>

Just style it and add either a link or a custom click event as shown above.

Answer 2

this worked for me :

<kendo-grid-command-column width="550">
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
        <a style="color: blue" href="https://www.w3schools.com/html/">{{dataItem.number}}</a>
    </ng-template>
</kendo-grid-command-column>

i guess you need "kendo-grid-command-column" instead of "kendo-grid-column"