Following code (shortened for simplicity):

<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");
                } } ); } ); }  });  }

Explaination: I'm checking for malware here (via this.attachmentClient.isValid on server-side).

My problem: It shows the validationerror, but still adds the file to value of the control. For example it doesn't add a file with a wrong extension (restricted via kendo-fileselect restrictions) How can I set my malware-file to not end up in value? I've tried ev.preventDefault(), but this removes the file completely from the list (and I don't see the validationerror)

Screenshot:

- first file: not allowed filetype -> is not in value of control

- second file: malware -> is still in value of control

Regards

Hi  Team,

I aim to create a separate component dedicated to the toolbar within a Kendo Grid. To achieve this, I've created a `ToolbarComponent`. In the parent component's Kendo Grid, I'm utilizing an `ng-container` to include it within the 'kendoGridToolbarTemplate'. Nevertheless, the styles are not being applied as expected. Specifically, the `kendo-grid-spacer` in the toolbar component is not functioning as anticipated. Can you please provide me a sample

parent component

    <kendo-grid
      [kendoGridBinding]="eduList"
      kendoGridSelectBy="id"
      [pageSize]="pageSize"
      [pageable]="{ type: 'numeric', position: 'top' }"
      [sortable]="true"
      [groupable]="false"
      [reorderable]="true"
      [resizable]="true"
      filterable="menu"
      [skip]="skip">

      <ng-template kendoGridToolbarTemplate>
        <ng-container [ngComponentOutlet]="toolbarComponent | async"></ng-container>
        <!-- <div>a</div> <kendo-grid-spacer></kendo-grid-spacer> <div>b</div> -->
      </ng-template>

      <kendo-grid-column field="id" title="#" headerClass="t-text-primary" [width]="50" [filterable]="false">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div class="customer-number">{{ rowIndex + 1 }}</div>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="" title="" [width]="50" [filterable]="false">
        <ng-template kendoGridCellTemplate let-dataItem>
          <!-- Template for the first column -->
          <kendo-button fillMode="clear" icon="edit"> </kendo-button>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column
        headerClass="t-text-primary"
        field="Name"
        title="Name"
        [width]="200">
      </kendo-grid-column>

      <kendo-grid-column
        headerClass="t-text-primary"
        field="Age"
        title="Age"
        [width]="150">
      </kendo-grid-column>


      <kendo-grid-column
        headerClass="t-text-primary"
        field="Edu"
        title="Education"
        [width]="150">
      </kendo-grid-column>

  </div>

child component:-

Does Kendo Scheduler for Angular with custom dates range

multiple months examples 1,2,3 months view at same time.

(And does it support multiple months examples 1,2,3 months view at same time.)

And also can we custom the start and end dates. As of now I only the 1 week for custom dates.

Can you please help.

Hi , 

I am using the Kendo Grid to display some data with checkboxes , I am trying to checked the item checkbox if the item is already selected , the selected item id is store on a separate sql table .

The process is ;  load items , load selected items , add selected items to selectedKeys.

for some reason the first time the page is loaded selectedKeys is empty , but if a navigate to another page and back to the page the selected items are checked.

I can only assume the selectedKeys are not populated on time for the grid to update the checkboxes , I have try NgOnInit , ngAfterViewInit. 

Any Ideas ? 

HTML

 <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>

TS 

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)
                }
            })
        }
    }

https://www.telerik.com/kendo-angular-ui/components/charts/drill-down/

I am using kendo Multiview calendar .I am expecting that when I click on any of the Weeknumber, complete week should be selected . Kindly help on this . Is there any click event available ?

I am using kendo Multiview calendar . Current implementation is the start day of the week is from Sunday.
I need to make start day of the week as Monday .Kindly help on this

My sample code :