<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="LoanFacility" 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>

      <kendo-icon *ngIf="dataItem.matchedPayIn === -1" [name]="'close-circle'" [size]="'small'" [themeColor]="'warning'"></kendo-icon>
      <kendo-icon *ngIf="dataItem.matchedPayIn !== -1" [name]="'tick'" [size]="'small'" [themeColor]="'success'"></kendo-icon>
      {{ dataItem.matchedPayIn === -1? 'Not matched': dataItem.matchedPayIn.Id}}
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
