Telerik Forums
Kendo UI for Angular Forum
1 answer
16 views

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!

Example: see dataItem.completionRatio calculation below.
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();
  }

Martin Bechev
Telerik team
 answered on 20 Mar 2025
1 answer
21 views

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?

Zornitsa
Telerik team
 answered on 19 Mar 2025
0 answers
18 views

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? 

Sergei
Top achievements
Rank 1
 asked on 14 Mar 2025
0 answers
20 views
kendo-grid-date-filter-menu
    #dateFilterMenu
    [column]="column"
    [filter]="filter"
    [filterService]="filterService"
>
</kendo-grid-date-filter-menu>

 

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

 

Ryan
Top achievements
Rank 1
Iron
 asked on 12 Mar 2025
0 answers
24 views

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

Mark
Top achievements
Rank 1
Iron
 asked on 07 Mar 2025
0 answers
38 views

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"

Could not resolve dependency:
@progress/kendo-angular-buttons@"17.0.0" from the root project

Conflicting peer dependency: @progress/kendo-angular-l10n@17.0.0
node_modules/@progress/kendo-angular-l10n
  peer @progress/kendo-angular-l10n@"17.0.0" from @progress/kendo-angular-buttons@17.0.0
  node_modules/@progress/kendo-angular-buttons
    @progress/kendo-angular-buttons@"17.0.0" from the root project

what can be the problem? I checked the dependencies of each package, I can't find any problem. All dependencies look okay to me.

Similarly, if I try to upgrade all packages to latest version via 'npx npm-check-updates --upgrade --filter "/@progress.*/"', still I am getting an error.

npm ERR!  Conflicting peer dependency: @progress/kendo-angular-l10n@18.1.0
npm ERR! node_modules/@progress/kendo-angular-l10n
npm ERR!   peer @progress/kendo-angular-l10n@"18.1.0" from @progress/kendo-angular-buttons@18.1.0
npm ERR!   node_modules/@progress/kendo-angular-buttons
npm ERR!     @progress/kendo-angular-buttons@"18.1.0" from the root project

 

 

anil
Top achievements
Rank 1
 asked on 04 Mar 2025
1 answer
25 views
Using the Angular grid with a detail template for master-detail functionality, how can I disable the functionality and hide the plus sign on rows which have no child data to display?  I found a feature request from 2016 here: https://github.com/telerik/kendo-angular/issues/106 , but it does not appear to have been implemented as described given errors I get in the console.
Hetali
Telerik team
 answered on 03 Mar 2025
1 answer
43 views

Hello!  I am having difficulty with the following scenario:  I have an array of objects that I'm displaying in my UI in the form of a table.  On my table I have the following columns: Name (string), PreferenceLevel (number), IsActive (bool).  I am using an *ngFor="let item of items" to render all of the table data.  The name looks great, as does the isActive,. For IsActive I am using a kendo-checkbox like this:

<kendo-checkbox [checkedState]="item.isActive" [(ngModel)]="item.isActive"></kendo-checkbox>

and it seems to render as checked or unchecked well based on the boolean that is coming across.

My Preference Level column is another story.  I have 4 preference levels based on 4 integers: 0,1,2,3.  I would like to have a radio button as the UI for this column, but cannot seem to get them to represent the data that is coming through.  Here's what I have:

<span style="padding-left:5px;">
  <kendo-radiobutton #radio0 value=0  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio0" text="None"></kendo-label>
  <kendo-radiobutton #radio1 value=1  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio1" text="+1"></kendo-label>
  <kendo-radiobutton #radio2 value=2  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio2" text="+2"></kendo-label>
  <kendo-radiobutton #radio3 value=3  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio3" text="+3"></kendo-label>
</span>

Perhaps I need to assign a checkedState or checked attribute in there like I did for the check box, but I can't figure out how to do it for the radio button.  Or perhaps the radio buttons can only process string values? (I saw only string examples in your documentation) There is nothing checked in my table with my markup as is above, though.  Please advise.

Yanmario
Telerik team
 answered on 03 Mar 2025
0 answers
23 views

I am struggling to find a way to drag and drop multiple rows. If they are non-contiguous i would just put them all together and drop them at the drop target. I'm experimenting with the new RowReordering but cant seem to find a way to have the RowReorderEvent to contain more than one data item.  Perhaps this is not the way to go about it so if someone could point me in the right direction that would be great!

NOTE: I have a method for doing this using a wrapper and the drag/drop API, but then i can't get the line indicator to visually show where the rows are being dropped. 

I would live with either method above as long as I can drag/drop multiple with an indicator...

Bryan
Top achievements
Rank 1
 asked on 28 Feb 2025
0 answers
13 views

We're using kendo-angular-grid": "15.5.0"

This page https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting refers to a property called rangeEndKey but it does not exist on SelectionEvent

Property 'rangeEndKey' does not exist on type 'SelectionEvent'

I can't find in mentioned in the changelog https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui

 

SoH
Top achievements
Rank 1
Iron
Veteran
Iron
 asked on 28 Feb 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
Krasimir
Top achievements
Rank 3
Iron
Iron
Iron
Shawn
Top achievements
Rank 1
Iron
Javier
Top achievements
Rank 1
Iron
Jean-François
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
Krasimir
Top achievements
Rank 3
Iron
Iron
Iron
Shawn
Top achievements
Rank 1
Iron
Javier
Top achievements
Rank 1
Iron
Jean-François
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?