SFM-Broker/src/app/pay-in/pay-in.component.html

<kendo-grid [data]="gridData"
            [pageable]="pageable"
            [pageSize]="filter.Take"
            [skip]="filter.Skip"
            [sortable]="sortable"
            [filterable]="filterable"
            [loading]="loading"

            [sort]="filter.Sort"

            (add)="addHandler($event)"
            (cancel)="cancelHandler($event)"
            (save)="saveHandler($event)"
            (edit)="editHandler($event)"
            (remove)="removeHandler($event)"

            (pageChange)="pageChange($event)"
            (sortChange)="sortChange($event)"
>
  <ng-template kendoGridToolbarTemplate>
    <div style="width:100%; margin:0px; display:block">
      <div *ngIf="allowAddNew" class="add-new-tool-bar">
        <button kendoGridAddCommand icon="plus" >Add new Income</button>
      </div>
      <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
          <button kendoButton icon="filter" (click)="showFilter()" >Filter</button>
          <button kendoButton icon="filter" >Upload</button>
      </div>
    </div>
  </ng-template>

  <kendo-grid-command-column *ngIf="allowEdit" title="command" width="100">
    <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
      <button kendoGridEditCommand *ngIf="!dataItem.Uploads !== 0" icon="edit"></button>
      <button kendoGridRemoveCommand *ngIf="!dataItem.Uploads !== 0" icon="delete"></button>
      <button kendoGridSaveCommand [disabled]="incomeFormGroup?.invalid" icon="save"></button>
      <button kendoGridCancelCommand icon="cancel"></button>
    </ng-template>
  </kendo-grid-command-column>

  <kendo-grid-column field="Id" title="Id" width="50" editable="false" >
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-numeric-filter-cell [column]="column" [filter]="filter" [showOperators]="false" >

      </kendo-grid-numeric-filter-cell>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="Trail" title="Trail Received" width="150" format="{0:c}" editor="numeric">
  </kendo-grid-column>

  <kendo-grid-column field="Ts" title="Trail Date" editor="date" width="100">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="Amount" title="Loan Amount" width="150" format="{0:c}"
                     [editable]="false" [sortable]="false">
  </kendo-grid-column>

  <kendo-grid-column field="Balance" title="Balance" width="150">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.Balance >=0 "> {{ dataItem.Balance | currency}} </div>
      <div *ngIf="dataItem.Balance < 0 "> unknown  </div>
    </ng-template>
    <ng-template kendoGridEditTemplate
                 let-dataItem="dataItem"
                 let-formGroup="incomeFormGroup">

      <kendo-switch [checked]="dataItem.Balance >=0"
                    name="showBalance" [(ngModel)]="showBalance"
                    ngModelOptions="{standalone: true}"
                    [onLabel]="'Yes'"
                    [offLabel]="'No'"
                    (valueChange)="setBalance()"
      >
      </kendo-switch>

      <kendo-numerictextbox  *ngIf="showBalance" name="balance"
                             [formControl]="incomeFormGroup.get('Balance')"
                             [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
      </kendo-numerictextbox>
    </ng-template>

  </kendo-grid-column>

  <kendo-grid-column field="OffsetBalance" title="Offset" width="150" >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.OffsetBalance >=0 "> {{ dataItem.OffsetBalance | currency}} </div>
      <div *ngIf="dataItem.OffsetBalance < 0 "> unknown  </div>
    </ng-template>
    <ng-template kendoGridEditTemplate
                 let-dataItem="dataItem"
                 let-formGroup="incomeFormGroup">

      <kendo-switch [checked]="dataItem.OffsetBalance >=0"
                    name="showOffsetBalance" [(ngModel)]="showOffsetBalance"
                    ngModelOptions="{standalone: true}"
                    [onLabel]="'Yes'"
                    [offLabel]="'No'"
                    (valueChange)="setOffsetBalance()"
      >
      </kendo-switch>

      <kendo-numerictextbox  *ngIf="showOffsetBalance" name="offsetBalance"
                             [formControl]="incomeFormGroup.get('OffsetBalance')"
                             [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
      </kendo-numerictextbox>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="UploadId" title="Uploads" width="100" format="{0:c}" [editable]="false" [sortable]="false">
    <ng-template kendoGridCellTemplate let-dataItem >
      <button kendoButton *ngIf="dataItem.UploadId > 0"
              (click)="showUpload(dataItem.UploadId)" icon="attachment"> {{ dataItem.UploadId }}
      </button>
      <p *ngIf="dataItem.UploadId <=0" > - </p>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column field="LoanId" title="Loan" width="80" [editable]="false" [sortable]="false">
    <ng-template kendoGridCellTemplate let-dataItem>
      <button *ngIf="dataItem.LoanId != '' && dataItem.LoanId != undefined " kendoButton [icon]="'page-properties'" (click)="gotoLoan(dataItem.LoanId)" > </button>
    </ng-template>
  </kendo-grid-column>

</kendo-grid>
<app-popup-income-filter #filterDialog (DoFilter)="doFilter($event)"> </app-popup-income-filter>