Telerik Forums
Kendo UI for Angular Forum
0 answers
105 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
183 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
189 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
140 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
41 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
2 answers
48 views
kendo-panelbar-item have no space around them when rendered on small screen (576px wide).
Sergey
Top achievements
Rank 1
Iron
 answered on 26 Feb 2025
1 answer
494 views

Hello,

we are updating an angular application from angular 16 ant Kendo UI 14

All the update worked fine and actually we are in angular 18 and Kendo UI 16

Now if I try to update KendoUI to version 18.1.0 (the lastone) all telerik controller became "unknown".

I have tried clear the node_modules folder, clear angular cache, restarted visual studio code...but never.

Now we are back to Angular 18/Kendo UI 16.

Thanks for any helps or idea

Maurizio

Zornitsa
Telerik team
 answered on 26 Feb 2025
1 answer
89 views

Hello Kendo team, 

 

Can you please help me fix this export issue, where in if I export with a lot of data, the first page is not having all the columns of data.

 

Please have a look at the stackblitz

https://stackblitz.com/edit/angular-znla2i-f7gggwxy.

 

If I click on Export Big, the first page is having only first column, expected result is to have all the columns.

Zornitsa
Telerik team
 answered on 24 Feb 2025
0 answers
201 views

Hello!

I use Angular 18 and just updated from Kendo v. 17 to 18.2.0 and I get an error in the grid regarding the rowDragHintTemplateRef.
The issue seems to be in this block of code

get customHintTemplate() {
        if (this.rowReorderable) {
            const allColumns = this.columnList.toArray();
            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
            return rowReorderColumn.rowDragHintTemplateRef;
        }
    }

because rowReorderColumn is undefined.

Apart from that, I get this error when I use the latest theme

 Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined function.
   â•·
28 │     @return math.round(color.channel( $color, "red" ));
   â”‚                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   â•µ
  node_modules\@progress\kendo-theme-core\scss\functions\_color.import.scss 28:24          k-color-red()
  node_modules\@progress\kendo-theme-core\scss\functions\_color.import.scss 604:46         k-color-luminance()
  node_modules\@progress\kendo-theme-core\scss\functions\_color.import.scss 694:12         k-contrast-legacy()
  node_modules\@progress\kendo-theme-core\scss\color-system\_functions.import.scss 233:79  k-generate-color-variations()
  src\styles.scss 18:41

Any guidance would be appreciated.

 

A
Top achievements
Rank 1
 asked on 18 Feb 2025
1 answer
99 views

I have a kendo-grid with a (selectionChange) attribute where I get my selection using a custom selectionService.ts:

(selectionChange)="selectionService.onSelectionChange($event)"

My selectionService is custom as I have different functionality based on if one item [1] or exactly two [1,2] is selected. If a 3rd row is selected, the third row should shift out the first, so the row would be [2,3]. My code here:

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
}

My problem is my selection works, but visually kendo still keeps the previously selected rows still selected as well. How do I make it so if a 3rd item is selected, the grid also deselects this item?

Stackblitz example:

https://stackblitz.com/edit/angular-pe3m9kdq-6wwuibrm

Yanmario
Telerik team
 answered on 18 Feb 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?