Format column values in kendo grid on dataItem

Question

I have following kendo grid column

<kendo-grid-column
    field="ADR"
    format="{0:c0}"
    [headerStyle]="numColWidth"
    [style]="numColWidthC"
  >
    <ng-template kendoGridHeaderTemplate let-column>
      <div
        style="width: 100%; display: inline;"
        [innerHtml]="fcstADRTitle"
      ></div>
    </ng-template>
  </kendo-grid-column>

where the ADR field is coming from the dataSource, now I want to format the column values depending on what the dataSource look like for that row.

Eg DataSource

data = { {'ADR': 145, 'currFormat': 'n2', 'currSymbol': '$'}, 
         {'ADR': 139, 'currFormat': 'c2', 'currSymbol': '€'},
         {'ADR': 356, 'currFormat': 'n2', 'currSymbol': '₹'} }

I want to format the adr values depending on currency. I have also written a function that could do something like that

My changes

<kendo-grid-column
    field="ADR"
    format="{0:c0}"
    [headerStyle]="numColWidth"
    [style]="numColWidthC"
  >
    <ng-template kendoGridHeaderTemplate let-dataItem>
      <div
        style="width: 100%; display: inline;"
        [innerHtml]="fcstADRTitle"
      >{{getCurrencyFormat(dataItem)}}</div>
    </ng-template>
  </kendo-grid-column>

public getCurrencyFormat(currFormat) {
    if (currFormat && currFormat.currSymbol && currFormat.currFormat) {
      return `{0:${currFormat.currFormat}} ${currFormat.currSymbol}`;
    }
    else {
      return `{0:c2} $`;
    }
  }

but HTML is getting loaded first and my dataitem object is empty when my function runs.

Can anyone help me, how can I achieve that?