<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<kendo-grid  [data]="data" (cellClick)="onCellClick($event)">
  <ng-template kendoGridToolbarTemplate>
    AAA
  </ng-template>
  <kendo-grid-column field="Period" format='{0:yyyy MMMM}'> </kendo-grid-column>
  <kendo-grid-column field="LoanNumber"> </kendo-grid-column>
  <kendo-grid-column field="Settlement" format='{0:MM/dd/yyyy h:mm a}'> </kendo-grid-column>
  <kendo-grid-column field="LoanAmount" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="Balance" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="InTrail" format='{0:c}'> </kendo-grid-column>
  <kendo-grid-column field="matchedPayIn" title="Matched" format='{0:c}'>
    <ng-template kendoGridCellTemplate let-dataItem>
      <button  kendoButton iconClass="fa fa-calendar fa-fw"></button>
      {{ dataItem.matchedPayIn === -1? 'Not matched': dataItem.matchedPayIn.Id}}
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
