<div class="EmployeeList">
  <app-employee-filter class="FilterComponent"
    [employeeDetails]=this.employeeDataService.employeeDetails
    [employeeList]=this.employeeDataService.employeeList
    [filterObject]=dataSource.filter
    (filterFetch)="loadData()">
  </app-employee-filter>
  <mat-card class="card">
    <mat-card-header>
    </mat-card-header>
    <mat-card-content>
      <dx-data-grid
        #gridEmployee
        id="gridEmployee"
        [class]="'gridEmployee'+(columnConfigList.withExport ? ' withexport' : '')"
        [dataSource]="dataSource.items"
        keyExpr="employeeId"
        [focusedRowEnabled]="true"
        [autoNavigateToFocusedRow]="true"
        [(focusedRowIndex)]=dataSource.focusedItemGridIndex
        [(focusedRowKey)]="dataSource.focusedItemId"
        [(selectedRowKeys)]="dataSource.selectedItemIds"
        [showBorders]="true"
        [allowColumnResizing]="true"
        columnResizingMode="nextColumn"
        noDataText="Keine Daten vorhanden"
        (onKeyDown)="$event.handled = $event.event.key==='Escape'; dataSource.gridUpDownProcessing($event)"
        (onFocusedRowChanging)="dataSource.onFocusedRowChanging($event)"
        (onRowDblClick)="dataSource.focusedEntityShadowed.delayedEdit($event.data['entityId'])"
        (onExporting)="globals.doExcelExportSimple($event, dataSource.getExportFilename4List())">

        <dxo-export [enabled]="columnConfigList.withExport" [texts]="{exportAll: 'Excel Export'}"></dxo-export>
        <dxo-header-filter [visible]="false"></dxo-header-filter>
        <dxo-filter-row [visible]="false" [applyFilter]="true"></dxo-filter-row>
        <dxo-paging [enabled]="false"></dxo-paging>
        <dxo-scrolling mode="virtual"></dxo-scrolling>
        <dxo-load-panel [enabled]="true"></dxo-load-panel>
        <dxo-sorting mode="multiple">
          <!--"single" | "multiple" | "none" -->
        </dxo-sorting>
        <dxo-selection mode="none">
          <!-- "multiple" | "none" -->
        </dxo-selection>

        <ng-container *ngFor="let column of columnConfigList.columns">
          <ng-container *ngIf=column.visible>
            <dxi-column
              [allowHeaderFiltering]=column.allowHeaderFiltering
              [dataField]=column.dataField
              [dataType]=column.dataType
              [caption]=column.caption
              [width]=column.width
              [sortIndex]=column.sortIndex
              [sortOrder]=column.sortOrder
              [visibleIndex]=column.visibleIndex
              [visible]=column.visible
              [fixed]=column.fixed
              [headerCellTemplate]=column.headerCellTemplate
              [cellTemplate]=column.cellTemplate
              [alignment]=column.alignment>
              <!-- cssClass="headeralignment_center" -->

              <dxo-format *ngIf="column.dataType === 'date'" [type]=localeService.dateFormat></dxo-format>
              <dxo-format *ngIf="column.dataType === 'datetime'" [type]=localeService.dateTimeFormat></dxo-format>
              <dxo-lookup *ngIf="column.dataField === 'rangId'" [dataSource]="appDataService.rangList?.items" valueExpr="entityId" displayExpr="rangShortname"></dxo-lookup>
            </dxi-column>
          </ng-container>
        </ng-container>

        <div *dxTemplate="let cell of 'numberTemplate_0'">
          {{cell.value | number:'1.0-0':culture}}
        </div>
        <div *dxTemplate="let cell of 'numberTemplate_1'">
          {{cell.value | number:'1.1-1':culture}}
        </div>
        <div *dxTemplate="let cell of 'numberTemplate_2'">
          {{cell.value | number:'1.2-2':culture}}
        </div>
        <div *dxTemplate="let cell of 'numberTemplate_3'">
          {{cell.value | number:'1.3-3':culture}}
        </div>
      </dx-data-grid>
    </mat-card-content>
  </mat-card>
  <div *ngIf="this.employeeDataService.employeeDetails.inNotViewMode" class="disableClicks"></div>
</div>
