<kendo-grid  [data]="gridView" (cellClick)="onCellClick($event)"
             [groupable]="true"
             [group]="groups"
>
  <ng-template kendoGridToolbarTemplate>
    Connective
  </ng-template>

  <kendo-grid-column field="Period" format='{0:yyyy MMMM}' width="110"> </kendo-grid-column>
  <kendo-grid-column field="LoanAccount" width="150"> </kendo-grid-column>
  <kendo-grid-column field="Name" width="150"> </kendo-grid-column>
  <kendo-grid-column field="Settled" format='{0:MM/dd/yyyy}' width="150"> </kendo-grid-column>
  <kendo-grid-column field="Lender" width="150"> </kendo-grid-column>
  <kendo-grid-column field="LoanAmount" format='{0:c}' width="150" > </kendo-grid-column>
  <kendo-grid-column field="Balance" format='{0:c}' width="150" > </kendo-grid-column>
  <kendo-grid-column field="Associate" width="150"> </kendo-grid-column>
  <kendo-grid-column field="Comm" format='{0:c}'> </kendo-grid-column>
  <kendo-grid-column field="Type" width="150"> </kendo-grid-column>
  <kendo-grid-column field="Percent" format='{0:p}' width="80"> </kendo-grid-column>
  <kendo-grid-column field="Paid" format='{0:c}' width="150"> </kendo-grid-column>
  <kendo-grid-column field="GST" format='{0:c}' width="150"> </kendo-grid-column>
  <kendo-grid-column field="Total" format='{0:c}' width="150"> </kendo-grid-column>

  <kendo-grid-column field="matchedPayIn" title="Matched" format='{0:c}' width="180">
    <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>
