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

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

            [sort]="filter.Sort"

            [selectable]="true"
            kendoGridSelectBy
            [selectedKeys]="gridSelection"

            [rowClass]="rowClassCallbackBind"

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

            (pageChange)="pageChange($event)"
            (sortChange)="sortChange($event)"
            [ngClass]="{ 'filterByUploadMeta': uploadMeta.Id > 0 }"
>
  <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" >
        <span *ngIf="uploadMeta.Id > 0 " class="badge badge-pill badge-primary specific-upload"> {{uploadMeta.Id}}  </span>
        <span *ngIf="uploadMeta.Id > 0 " class="badge badge-secondary specific-upload"> {{uploadMeta.FileName}} </span>
        <button kendoButton icon="filter" (click)="showFilter()" >Filter</button>
      </div>
    </div>
  </ng-template>

  <kendo-grid-command-column *ngIf="allowEdit" title="command" width="100">
    <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
      <div class="duplicate">dup</div>
      <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="Lender" title="Lender" width="150" >
    <ng-template kendoGridEditTemplate let-dataItem let-formGroup>
      <kendo-combobox
        [formControl]="formGroup.get('Lender')"
        [data]="lenderListView | async"
        [allowCustom]="true"
        [loading]="lenderNameService.loading">
      </kendo-combobox>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="LoanNumber" title="Lender Loan Id" width="150" editor="string">
  </kendo-grid-column>

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

  <kendo-grid-column field="IncomeType" title="Type" width="150"  editor="string">
  </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="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"
                             [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"
                             [formControl]="incomeFormGroup.get('OffsetBalance')"
                             [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
      </kendo-numerictextbox>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column *ngIf="showUploadColumn"
    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 *ngIf="showLoanColumn"
                     field="LoanId" title="Loan" width="210"
                     [editable]="true "
                     [sortable]="false">
    <ng-template kendoGridCellTemplate let-dataItem>
      <app-loan-card *ngIf="dataItem.LoanId !== '' " [Loan]="dataItem.Loan"></app-loan-card>
    </ng-template>
    <ng-template kendoGridEditTemplate let-dataItem>
      <app-loan-select [formControl]="incomeFormGroup.get('Loan')" (valueChange)="onLoanChange($event)"
                       [Max]="1" [readOnly]="this.filterLoan !== undefined && this.filterLoan.Id !==''"
      ></app-loan-select>
    </ng-template>
  </kendo-grid-column>

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