Hello,


I'm using Kendo UI for Angular's Upload component and implementing a custom upload mechanism via the upload event handler. The goal is to post the file before form submit (reactive form dynamically generated) and on submit only filename will be passed to form).

The problem is that although I've implemented custom upload handler, component is trying to post the file (at least I see POST to localhost in network tab)? Solved this with `e.preventDefault()` which uploads file correctly, but file is removed from kendo-upload and there is no info if it's uploaded. 

<kendo-upload
  [multiple]="false"
  (upload)="uploadEventHandler($event)">
</kendo-upload>

uploadEventHandler(e: UploadEvent) {
  this.file = e.files[0].rawFile;
  this.uploadStatus = 'uploading';
  
  this.fileUploadService.mediaUpload(this.file, this.question).subscribe({
    next: () => {
      this.uploadStatus = 'success';
      this.control.setValue(this.file?.name);
    },
    error: (error: any) => {
      this.uploadStatus = 'error';
      this.errorMessage = this.getUserFriendlyErrorMessage(error);
    },
  });

  e.preventDefault(); 
}

Hi,
I use the kend dropdownlist with a attached kendo-label. However the "for" reference of the label is marked as invalid (at least by "AInspector" and "WAVE" Accessibility testing tools). 

Please see attached screen shots, where I tested against the first example from the kendo docs
( https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdownlist/basic_usage?theme=default-ocean-blue-a11y )

DOM inspection of the example shows, that the label properly references the dropdownlist, also the aria-labelledby reference is correct:

<kendo-label text="Find restaurants in your area" dir="ltr"><!---->
  <label for="k-9997b5c1-2233-4273-ba25-6e344c093c3d" id="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
  Find restaurants in your area<!----></label>
      <kendo-dropdownlist ... 
                      aria-describedby="k-80ee2bb7-41d8-4c8b-9afc-08898b371395"
                      id="k-9997b5c1-2233-4273-ba25-6e344c093c3d" ... aria-labelledby="k-2a8d206c-3623-44ce-a03d-c8c097acc5a6">
          <button ...>...</button>
            ...       

The problem could be, that the label references the <kendo-dropdownlist> tag itself, not the included button or other included elements.

According to HTML documentation , only "labelable elements" can be referenced by the "for" reference of a label (e.g. button, input, see labelable elements ).

My question is, how to deal with it, and how to explain the warnings to our customers...

Thank you in advance!

Getting below error while building angular application

10:04:17 am[vite] (client)warning: 

/.../.angular/cache/20.2.1/.../vite/deps/@progress_kendo-angular-pdfviewer.js

16367 |        const worker = yield import(

16368 |          /*webpackIgnore: true*/

16369 |          this.workerSrc

      |          ^^^^^^^^^^^^^^

16370 |        );

16371 |        return worker.WorkerMessageHandler;

The above dynamic import cannot be analyzed by Vite.

See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

  File: /.../.angular/cache/20.2.1/.../vite/deps/@progress_kendo-angular-pdfviewer.js?v=46fe0012

@progress/kendo-angular-pdfviewer: 20.0.2

Angular:  20.2.1

Node: 22.18.0

NPM: 10.9.3

Hi Team,

I have default text filter (manual/server side) and want to have another filter as dropdownlist but both filters together  working

Sample : https://stackblitz.com/edit/dvv6dr8o

Before Filter

After apply both filters and remove filter for "Product Name" is not working. Also the filter array lost the selection for  "Category" field.
Also I need help to clear the dropdownlist/filter for category.

Is it possible to do this? 

I see I can customise individual items, but they would need to be in a Sortable container in order for drag / drop to work. Is there any way of achieving this?

Thanks

Hi,

I'm using kendo-grid in Angular with both resizable columns and virtual scrolling enabled.
I also call the autoFitColumns() method (through ViewChild) to auto-adjust the column widths based on the content.

However, I noticed the following problematic behavior:

• My grid uses pageSize = 60, so only 60 rows are rendered in the DOM at a time.

• I have a total of about 101 rows.

• The content in row #101 is much wider than any of the rows currently rendered.

• When I call autoFitColumns(), the method calculates the width based only on the visible (rendered) rows (the first 60).

• As a result, when I scroll down to row 101, the cell shows ellipsis (...) because the column width didn't get adjusted based on its content.

It seems that autoFitColumns() does not take into account rows that aren't currently rendered due to virtual scrolling.

Expected behavior:
Ideally, autoFitColumns() should consider the ENTIRE dataset, or at least provide an option to temporarily render all rows, so the width is calculated correctly.

I'll attach a sample StackBlitz with:

• 101 records

• Virtual scrolling + resizable = true

• Last row has a long text

• After calling autoFitColumns, the column is not wide enough and shows "..."

Could you please confirm if this is expected behavior or if there's a recommended workaround?

https://stackblitz.com/edit/angular-8rzs1wr6-7hvlbi8f?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts

Thanks in advance!

Hi Team,

Originally we have implemented the client side filter using the Date Range for date column. Now the requirement got changed and we need to fetch it from server. But the problem is API call returns the data based on start and end date selected but the UI is not rendering the same. UI is rendering the data if we select only the start date.
We have implemented the date range filter by referring this page https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange. Can you please help to render the data by ignoring the client side filter. we are using the CompositeFilterDescriptor for filter the kendo grid data from server. still the client side filter is working for text/string filter but rendering the final data returned by API.

import { Component, Input } from "@angular/core";
import {
  BaseFilterCellComponent,
  FilterService,
} from "@progress/kendo-angular-grid";
import { FilterDescriptor } from "@progress/kendo-data-query";
import { SVGIcon, xIcon } from "@progress/kendo-svg-icons";

/**
 * NOTE: Interface declaration here is for demo compilation purposes only!
 * In the usual case include it as an import from the data query package:
  */
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: "date-range-filter-cell",
  styles: [
    `
      kendo-daterange > kendo-dateinput.range-filter {
        display: inline-block;
      }
      .k-button {
        margin-left: 5px;
      }
    `,
  ],
  template: `
    <kendo-daterange>
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeStartInput
        [value]="start"
        (valueChange)="filterRange($event, end)"
        style="width:120px"
      >
      </kendo-dateinput>
      -
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeEndInput
        [value]="end"
        (valueChange)="filterRange(start, $event)"
        style="width:120px"
      >
      </kendo-dateinput><button
      kendoButton
      [svgIcon]="xIcon"
      title="Clear"
      (click)="clearFilter()"
    ></button>
    </kendo-daterange>
  `,
})
export class DateRangeFilterCellComponent extends BaseFilterCellComponent {
  // @Input() public filter: CompositeFilterDescriptor;

  @Input()
  public field: string;

  public xIcon: SVGIcon = xIcon;

  // constructor(filterService: FilterService) {
  //   super(filterService);
  // }

  public get start(): Date {
    const first = this.findByOperator("gte");

    return (first || <FilterDescriptor>{}).value;
  }

  public get end(): Date {
    const end = this.findByOperator("lte");
    return (end || <FilterDescriptor>{}).value;
  }

  // public get hasFilter(): boolean {
  //   return this.filtersByField(this.field).length > 0;
  // }

  public clearFilter(): void {
    this.filterService.filter(this.removeFilter(this.field));
  }

  public filterRange(start: Date, end: Date): void {
    this.filter = this.removeFilter(this.field);

    const filters = [];

    if (start) {
      filters.push({
        field: this.field,
        operator: "gte",
        value: start,
      });
    }

    if (end) {
     let enddate = new Date(end);

      filters.push({
        field: this.field,
        operator: "lte",
        value: end.setDate(enddate.getDate() + 1),
      });
    }

    const root = this.filter || {
      logic: "and",
      filters: [],
    };

    if (filters.length) {
      root.filters.push(...filters);
    }

    this.filterService.filter(root);
  }

  private findByOperator(op: string): FilterDescriptor {
    return this.filtersByField(this.field).filter(
      ({ operator }) => operator === op
    )[0];
  }
}

Our web application uses Kendo Angular Date Picker. And we are creating testcases on our web with a tool called Playwright from Microsoft. This tool mimics human interaction with the web. And on any form input control regardless of type, this fill() is used. For example:

; ----> this code will set the date input value to 2025 august 21st. But on kendo angular date picker, the resulting code is this:

Which will not bulletproof the testcase for future runs, as it does not contain the whole date including its year.

My question is can this component function just like native date input in this regard?