<kendo-grid  [data]="data" (cellClick)="onCellClick($event)">
  <ng-template kendoGridToolbarTemplate>
    {{this.AgencyName}}
  </ng-template>

  <kendo-grid-column field="Period" title="Period" format='{0:yyyy MMMM}' width="150"> </kendo-grid-column>
  <kendo-grid-column field="LoanNumber" width="250"> </kendo-grid-column>
  <kendo-grid-column field="Borrower" width="150"> </kendo-grid-column>
  <kendo-grid-column field="LoanAmount"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="InterestRate"  width="100" > </kendo-grid-column>
  <kendo-grid-column field="Margin"  width="100" > </kendo-grid-column>
  <kendo-grid-column field="Settlement"  width="150" format='{0:MM/dd/yyyy}'> </kendo-grid-column>
  <kendo-grid-column field="Balance"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="OffsetBalance"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="GrossManFee"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="IncentiveP"  title="Incentive %" width="150"  > </kendo-grid-column>
  <kendo-grid-column field="Months"  width="150"  > </kendo-grid-column>
  <kendo-grid-column field="SacrificeP" title="Sacrifice %" width="150"  > </kendo-grid-column>

  <kendo-grid-column field="Fee"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="MoFee"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="NetManFee"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="IncomeAmount"  width="150" format='{0:c}' > </kendo-grid-column>

  <kendo-grid-column field="matchedPayIn" title="Matched"  width="200" 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>
