Telerik Forums
Kendo UI for Angular Forum
1 answer
46 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
27 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
15 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
21 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
125 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
52 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
82 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
46 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
0 answers
38 views

In Classic calendar, only for the very first time,  if we click on navigate button to go to a different month, a scroll happens to go to current date in the target month. Second time if we click navigation button, this scroll does not happen. Due to a business requirement all cells of our calendar have been made to a size of more than 100px in width and height. Due to this massive size of the entire calendar, the scroll does not give a good user experience. Is it possible to avoid this?

 

Thambu
Top achievements
Rank 1
 asked on 17 Feb 2025
0 answers
31 views
When kendo grid selector has `scrollable="none"` input,
1. the column header filter icon lost style,
2. column resize become not working

To replicate
https://stackblitz.com/edit/angular-w4gzqry3
Levon
Top achievements
Rank 1
Iron
Iron
 asked on 08 Feb 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?