I have 2 Kendo Grids in my Angular application. In the 1st one, I use "virtual scrolling" because we have a lot of data (e.g. 10K records). The 2nd one is a "basic" Kendo Grid.
The functionality I want to achieve is to have the ability to "remove" (or hide - I don't know) the selected row from the 1st grid and add it to the 2nd one. The issue that I'm dealing with, is that if I transfer - let's say - 10-20 rows, when I start to scroll in my "virtual scrolling" grid, there is an annoying jump scrolling. I think that this "bug" is due to "hide" attribute that I'm adding to each removed row.
Virtual Scrolling Grid:
<kendo-grid
#grid1 id="ours"
(click)="onGridClick(0)"
class="mb-1"
[data]="gridViewN"
[kendoGridBinding]="gridDataN"
[skip]="skipN"
[pageSize]="pageSizeNV"
scrollable="virtual"
[rowHeight]="24"
[style.height]="'33%'"
[rowClass]="rowCallback"
[sortable]="sortSettings"
[filterable]="'menu'"
[loading]="isLoadingN"
[navigable]="true"
[resizable]="true"
appGridCopy
[selectable]="{ mode: 'single' }"
[(selectedKeys)]="selectedRowInGrid[0]"
kendoGridSelectBy="ID"
(pageChange)="pageChange($event, 'N')"
(sortChange)="sortChange($event, 'N')"
(dblclick)="onDblRowClick(grid1, $event, 'N')"
(keydown)="onKeyDown($event, grid1, 'N')"
(filterChange)="filterChange($event)"
(cellClick)="onCellClick($event)">
Move row with 'Enter' key:
onKeyDown(event: KeyboardEvent, grid: any, gridID: 'N' | 'V' | 'selected') {
event.preventDefault();
switch (event.key) {
case 'Enter':
if (gridID === 'N' || gridID === 'V') {
this.addToSelectedTable(grid, gridID);
}
break;
case 'Backspace':
if (gridID === 'selected') {
this.removeFromSelectedTable(grid);
}
break;
}
}
addToSelectedTable(grid: any, gridID: 'N' | 'V') {
let row = grid.activeRow.dataItem;
let item: any;
if (gridID === 'N') {
item = this.gridDataN.find(x => x.ID === row.ID);
this.lastPrevIndexN = this.gridViewN.data.findIndex(tempItem => tempItem.ID === item.ID);
row.from = 'N';
} else {
item = this.gridDataV.find(x => x.ID === row.ID);
this.lastPrevIndexV = this.gridViewV.data.findIndex(tempItem => tempItem.ID === item.ID);
row.from = 'V';
}
if (item) {
row.newId = this.activeRow;
this.gridSelected.push(structuredClone(row));
this.activeRow++;
this.gridSelectedSort = this.gridSelected.slice(0);
item.hide = true;
}
this.loadRows(gridID);
this.getSelectedTotal();
this.getNextRowInGrid(gridID);
}
Hello,
When updating to the latest version of kendo-licensing the license isn't applied anymore via our pipeline/site.
The step in our azure devops pipeline gives the message that the license is found but if we start our application the message comes that the license needs to be activated/watermark applied.
With version 1.5.1 we don't have any issues. There the license is applied correctly.
Devops step:
Step with 1.5.2 (doesn't apply the license)
Starting: Activate Kendo UI License
==============================================================================
Task : Command line
Description : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows
Version : 2.250.1
Author : Microsoft Corporation
Help : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
Script contents: shell
call npx kendo-ui-license activate
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "C:\agent\_work\_temp\f68efdff-b07b-4c99-8e1f-f36fc1d33941.cmd""
[INFO][Telerik and Kendo UI Licensing] Telerik and Kendo UI License Key found at: KENDO_UI_LICENSE
License issued at 7/2/2024 11:45:22 to ******
Finishing: Activate Kendo UI License
Step with v1.5.1 (does apply the license).
Starting: Activate Kendo UI LicenseAfter 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!
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
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
I currently convert all my Kendo themes (linked to my custom theme in my application) to use the new Design system.
I got 2 scss files by theme. ex: pink theme in dark and in light. Then a service switches the generated css file at runtime to reflex the theme user selected.
So I try to change one of them with the new way to compile Kendo themes like:
@use 'sass:map';
@use '@progress/kendo-theme-default/scss/index.scss' as *;
$kendo-colors: map.merge(
$kendo-colors,
(
app-surface: #1e293b,
on-app-surface: #ffffff,
)
);
// Use the 'k-generate-color-variations' function to generate
// all shades of the 'primary', 'secondary' and the 'base' color.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #818cf8, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #475569, 'default'));
@include kendo-theme--styles();
That works great, but all background (grid, textbox... ) are for light themes (background white). With the old system, we can add:
$theme-type: dark
But tha do not work anymore.
So how to create a theme with the same primary and seconfady color, but in a light and dark theme.
Thanks,