<kendo-fileselect
  id="files"
  formControlName="files"
  [restrictions]="this.fileRestrictions"
  (select)="onFileSelect($event)">
  <ng-template kendoFileSelectFileInfoTemplate let-files>
---- shows name and validationerrors ----
  </ng-template>
</kendo-fileselect>

  async onFileSelect(ev: SelectEvent) {
    ev.files.forEach(currentFile => {
      if (currentFile.rawFile) {
        this.readFile(currentFile.rawFile).then(content => {
            let attachment = (<AttachmentModel>{filename: currentFile.name, content: content});
            this.attachmentClient.isValid(attachment, this.tenant).subscribe(
              isValid => {
                if (!isValid) {
                  currentFile.validationErrors = currentFile.validationErrors ?? [];
                  currentFile.validationErrors.push("malwareFound");
                } } ); } ); }  });  }

 <kendo-grid [data]="gridData" 
    (dataStateChange)="dataStateChange($event)" 
    [filterable]="true"
    [filter]="state.filter"
    [sortable]="true"
    [sort]="state.sort"
    [pageSize]="20"
    [pageable]="true"
    kendoGridSelectBy="codeNumber"
    [selectedKeys]="selectedCodes"
    (selectionChange)="onSelect($event)"
    [selectable]="selectableSettings">
       
        <kendo-grid-column field="codeNumber" title="Code Number"> </kendo-grid-column>
        <kendo-grid-checkbox-column title="Use on Project"></kendo-grid-checkbox-column>
        
    </kendo-grid>

export class PackageCodesMasterListComponent implements OnInit, AfterViewInit {

    public gridData: GridDataResult;
    packageCodes: PackageCode[] = [];
    item: PackageCode;
    packageCodeTypes: PackageCodeType[];
    public selectedCodes: string[] = [];
    projectPackageCodes: ProjectPackageCode[] = [];

    public mode: SelectableMode = "multiple";

    constructor(private store: Store<IPackageCodeState>, private coreStore: Store<AppState>, private router: Router) {
        combineLatest(this.store.pipe(select(selectPackageCodes)), this.store.pipe(select(selectProjectPackageCodes)), this.store.pipe(select(selectPackageCodeTypes))).subscribe(([packageCodes, projectPackageCodes, packageCodeTypes]) => {
            if (packageCodes && projectPackageCodes && packageCodeTypes) {
                this.packageCodes = packageCodes;
                this.projectPackageCodes = projectPackageCodes;
                this.packageCodeTypes = packageCodeTypes;

                if (this.projectPackageCodes.length > 0) {
                    this.findSelectedItems();
                }
                this.gridData = process(this.packageCodes, this.state);
            }
        })
    }

    ngOnInit(): void {
        this.store.dispatch(getPackageCodes())
        this.store.dispatch(getPackageCodeTypes())
        this.store.dispatch(getProjectPackageCodes())
    }

    public ngAfterViewInit() {
        //Custom logic could be added here, to be executed once the grid and the selection are loaded
        this.findSelectedItems();
    }

    public state: State = {
        sort: [{ field: "codeNumber", dir: "asc" }],
        group: [],
        filter: {
            logic: "and",
            filters: [],
        },
    };

    public selectableSettings: SelectableSettings = {
        enabled: true,
        mode: this.mode
    };

    public dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(this.packageCodes, this.state);

    }

    findSelectedItems() {
        if (this.projectPackageCodes.length > 0) {
            this.projectPackageCodes.forEach(item => {

                let code = this.packageCodes.find(x => x.packageCodeId === item.packageCodeId)
                let y = this.selectedCodes.includes(code.codeNumber)
                if (y === false) {
                    this.selectedCodes.push(code.codeNumber);
                    console.log(this.selectedCodes.length)
                }
            })
        }
    }