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.
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...
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
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
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.
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
because rowReorderColumn is undefined.
Apart from that, I get this error when I use the latest theme
Any guidance would be appreciated.
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:
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?