Hi,

We need advice on how to add "id" and "for" reference attributes to custom angular components and associated kendo labels.

We use custom controls, that implement the ControlValueAccessor interface. We would like to use them with associated kendo-labels.

There is a good documentation here:

https://www.telerik.com/kendo-angular-ui/components/labels/label/association#other-angular-components

However it is not sufficient for our case. We need to keep WCAG conformity (level AA), means, the Html label element and the Html input element should be connected by attributes for and id, e.g.:

<label for="someId">Input here</label>
<input id="someId">

With standard kendo label and kendo input controls, these reference attributes for the inner Html elements are added by some kendo magic.
This however does not work if the kendo input control is wrapped in a component.
The accessability testing tools (e.g. WAVE, AInspector) mark this as an error.

Can someone propose a solution, on how to get the proper attributes onto the Html elements, or does anyone know a good and usable workaround (final ressort would be to set aria-label to the inner input element ...).

I attach a codesandbox  link which extends the kendo documentation mentioned above, and a screenshot with WAVE test result for the code snippet.

Thank you in advance.

https://codesandbox.io/p/sandbox/exciting-water-s8hp6k

After upgrading to angular 19 and kendo angular grid to version 17. it's throwing this error.

can't find this service in kendoAngular 17 version "PagerContextService!" Checkbox is also not showing in grid.

No provider for PagerContextService!

Hello,

I'm using the Kendo Angular Gantt chart, using flat binding since that's how the data is stored in my database.  A lot of the example code for editing tasks, dragging tasks, etc. rely on using the subtasks property on the Task to determine if the parent start/end dates or the completionRatio needs to be updated.

What is the best way to calculate the new start/end date or completionRatio when using flat binding?  I know that I could make a call to the database to calculate this, but would prefer to calculate this locally if possible.  Thanks!

public onDragEnd(e: TaskDragEvent, gantt: GanttComponent): void {
    const originalItem = { ...e.item.dataItem };
    const editedItem = {
      ...originalItem,
      start: e.start,
      end: e.end,
      completionRatio: e.completionRatio,
    };

    const taskFormGroup = this.createFormGroup(editedItem);
    if (!taskFormGroup.valid) {
      // You can notify the user that the edited item is invalid.
      return;
    }
    // Update the edited item
    Object.assign(e.item.dataItem, {
      start: e.start,
      end: e.end,
      completionRatio: e.completionRatio,
    });

    // Edit the ancestor items accordingly if necessary
    if (this.anyChanged(originalItem, editedItem)) {
      let currentItem = e.item.parent;

      while (currentItem) {
        const dataItem = currentItem.dataItem;
        const subtasks = dataItem.subtasks;

        dataItem.completionRatio =
          subtasks.reduce((acc, curr) => acc + curr.completionRatio, 0) /
          subtasks.length;
        dataItem.start = new Date(Math.min(...subtasks.map((t) => t.start)));
        dataItem.end = new Date(Math.max(...subtasks.map((t) => t.end)));

        currentItem = currentItem.parent;
      }
    }
    gantt.updateView();
  }

https://stackblitz.com/edit/angular-xqqm6evd?file=src%2Fapp%2Fapp.component.ts

I took the sample grid from the examples for Filter Menu, and then modified the UnitPrice to reflect a % instead of price.

I'm noticing something strange. When I try to filter, I need to filter on the raw value (so, for 4%, I need to filter on 0.04). This is fine and expected (although, bonus points if there is an option to have the filte reflect the display value, so user just needs to filter on "4").

However, when I start typing in 0.04, it seems that the filter component is resetting the field when enabling the "Filter" button if you're not fast enough. So, for example, you type in "0.0", the button enables, the component evaluates "0.0" and resets it to "0", losing the decimal. This is making it really frustrating to filter on these values.

If you do it fast enough, you can avoid this and filter as expected.

Any thoughts on how to fix this, or pereferably how to get it to filter based on the percentage itself?

Hello!

Currently, <kendo-upload> only allows to specify URLs for save and remove methods, which can be a problem sometimes. For example, when you deal with 3rd party API library where all the URLs are dynamic and encapsulated in library methods. So we cannot provide a URL to the component, but we could call the method instead to upload the file and report the progress on the files. Currently, <kendo-upload> doesn't allow that. I can intercept (upload) event and prevent default behavior, adding my own server call and custom logic, but there is no API in <kendo-upload> that will tell the component that the upload is started, or to report the upload progress on individual files, the whole component will be just unfunctional.

We were trying to replicate the auto-upload behavior using <kendo-fileselect> component, but it lacks the ability to change the dropzone hint or entire dropzone template without heavy uplifting of adding localization support to the app.

Are there any plans of adding more flexibility to <kendo-upload> and <kendo-fileselect> components? 

I am using the above date filter in a custom filter component. I want to have the 1st filter be gte, and the second fitler be lte. However, I cannot seem to get it to default this way - any default operator I give it applies to both filters

I'm receiving the following error using v18.0.1

Error: ../node_modules/@progress/kendo-date-math/dist/npm/tz/zoned-date.d.ts:38:22 - error TS2420: Class 'ZonedDate' incorrectly implements interface 'Date'. Type 'ZonedDate' is missing the following properties from type 'Date': MonthNames, MonthNamesShort, DayNames, DayNamesShort, and 27 more.

Here is my package.json:

{
  "name": "workbench",
  "version": "2.7.9",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --configuration development",
    "build": "ng build",
    "build-prod": "ng build --configuration production --output-hashing=all --source-map=false",
    "build:ssr": "ng run WebApplication1:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@ngx-formly/core": "^6.3.7",
    "@ngx-formly/material": "^6.3.7",
    "@ngx-formly/schematics": "^6.3.7",
    "@progress/kendo-angular-grid": "^18.1.0",
    "@progress/kendo-angular-layout": "^18.1.0",
    "@progress/kendo-licensing": "^1.4.0",
    "@progress/kendo-theme-material": "^10.2.0",
    "ag-grid-angular": "^32.2.1",
    "ag-grid-community": "^32.2.1",
    "bootstrap": "^5.3.3",
    "jquery": "3.7.1",
    "material-design-icons": "^3.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.1",
    "@angular/cli": "^18.0.1",
    "@angular/compiler-cli": "^18.0.0",
    "@angular/localize": "^18.2.6",
    "@types/jasmine": "~5.1.4",
    "jasmine-core": "~5.3.0",
    "karma": "~6.4.4",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

I tried deleting package.lock.json and running npm i to no avail. If I remove the implementation of Date for ZonedDate, it compiles but I don't have the ability to update the node_modules files in the CI/CD pipeline.

Any ideas would be appreciated. Thank you

Hi,

My npm upgrade command fails with some errors when I try to upgrade kendo-angular from 16.8 to 17.0.

my packages:

"@progress/kendo-angular-buttons": "17.0.0",
"@progress/kendo-angular-charts": "17.0.0",
"@progress/kendo-angular-common": "17.0.0",
"@progress/kendo-angular-dateinputs": "17.0.0",
"@progress/kendo-angular-dialog": "17.0.0",
"@progress/kendo-angular-dropdowns": "17.0.0",
"@progress/kendo-angular-editor": "17.0.0",
"@progress/kendo-angular-excel-export": "17.0.0",
"@progress/kendo-angular-gauges": "17.0.0",
"@progress/kendo-angular-grid": "17.0.0",
"@progress/kendo-angular-inputs": "17.0.0",
"@progress/kendo-angular-intl": "17.0.0",
"@progress/kendo-angular-l10n": "17.0.0",
"@progress/kendo-angular-label": "17.0.0",
"@progress/kendo-angular-layout": "17.0.0",
"@progress/kendo-angular-menu": "17.0.0",
"@progress/kendo-angular-pager": "17.0.0",
"@progress/kendo-angular-pdf-export": "17.0.0",
"@progress/kendo-angular-popup": "17.0.0",
"@progress/kendo-angular-progressbar": "17.0.0",
"@progress/kendo-angular-scheduler": "17.0.0",
"@progress/kendo-angular-scrollview": "17.0.0",
"@progress/kendo-angular-sortable": "17.0.0",
"@progress/kendo-angular-toolbar": "17.0.0",
"@progress/kendo-angular-treelist": "17.0.0",
"@progress/kendo-angular-treeview": "17.0.0",
"@progress/kendo-angular-upload": "17.0.0",
"@progress/kendo-data-query": "1.7.0",
"@progress/kendo-date-math": "1.5.13",
"@progress/kendo-drawing": "1.21.0",
"@progress/kendo-font-icons": "3.0.0",
"@progress/kendo-licensing": "1.3.5",
"@progress/kendo-recurrence": "1.0.3",
"@progress/kendo-theme-default": "8.0.1"