hi,
i am looking the below topic:
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual
the web page says :
my question is:
how to scroll the table by codes?
for example ,i want to scroll the table making the data which id is 10254 visiable,
please tell me how to do this
thank you.
Verified active Kendo UI license in Telerik account. Downloaded telerik-license.txt and placed it in the project root.Installed @progress/kendo-licensing via npm install --save. Activated the license with npx kendo-ui-license activate.Confirmed all steps work locally.Encountering build error during OpenShift pipeline build after adding license.
Error: EACCES: permission denied, open '/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/dist/index.mjs'Hey,
I tried to play around with the new Toolbar inside the Grid.
From the documentation I copied:
<kendo-grid<kendo-toolbar overflow="scroll">
<kendo-toolbar-button kendoGridFilterTool></kendo-toolbar-button>
<kendo-toolbar-button kendoGridSortTool></kendo-toolbar-button>
<kendo-toolbar-button kendoGridGroupTool></kendo-toolbar-button>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
<kendo-toolbar-spacer></kendo-toolbar-spacer>
<kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
<kendo-toolbar-button kendoGridExcelTool></kendo-toolbar-button>
</kendo-toolbar>
...
Sadly, I can't seem to get the first three directives (kendoGridFilterTool, kendoGridSortTool, kendoGridGroupTool) to work.
I'm in Webstorm which tells me: "Attribute kendoGridFilterTool is not allowed here".
Am I missing an import or something?
Please help.
Hi,
i tried to use kendo ui at angular V19, i got the below errors when i ran ng server:
X [ERROR] TS2322: Type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is not assignable to type 'any[] | Type$1<any> | ModuleWithProviders<{}>'.
The type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. [plugin angular-compiler]
my package.json:
can you please help ?
<kendo-grid [selectable]="true" [kendoGridBinding]="[{name: 'bill', age: 55}]">
<kendo-grid-column field="name" title="Name"></kendo-grid-column>
<kendo-grid-column field="age" title="Age"></kendo-grid-column>
<ng-template kendoGridDetailTemplate>
<textarea rows="3"></textarea>
</ng-template>
</kendo-grid>
Hi Team,
We are using the Kendo grid and getting below warnings for Aria role with accessibility check. the code is simply to display the data from DB and non editable & Sortable.
Please help to resolve the below 4 warnings for single Kendo grid.
Using the Kendo grid version 18.0.0
1.
Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (thead)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: ***************
Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > .k-grid-header[role="presentation"] > .k-grid-header-wrap[data-scrollable=""][role="presentation"] > .k-grid-header-table > thead
Snippet: <thead kendogridheader="" role="rowgroup" class="k-table-thead">
How to fix:
Fix any of the following:
Element has children which are not allowed: [role=columnheader]
Environment: Microsoft Edge version 136.0.0.0
Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (#k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: **********
Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5
Snippet: <div role="grid" kendodragtargetcontainer="" kendodroptargetcontainer="" mode="manual" class="k-grid-aria-root" id="k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5" aria-label="Data table" aria-rowcount="2" aria-colcount="22">
How to fix:
Fix any of the following:
Element has children which are not allowed: [role=presentation], [role=columnheader], [role=gridcell]
Environment: Microsoft Edge version 136.0.0.0
Title: WCAG 2.1.1: Ensure elements that have scrollable content are accessible by keyboard (.k-grid-content.k-virtual-content)
Tags: Accessibility, WCAG 2.1.1, scrollable-region-focusable
Issue: Ensure elements that have scrollable content are accessible by keyboard (scrollable-region-focusable - https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable)
Target application: *****************
Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content
Snippet: <div class="k-grid-content k-virtual-content" style="width: 1588px;">
How to fix:
Fix any of the following:
Element should have focusable content
Element should be focusable
Environment: Microsoft Edge version 136.0.0.0
Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (tbody)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: ***************
Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content > div[role="presentation"] > .k-grid-table > tbody
Snippet: <tbody kendogridtablebody="" role="rowgroup" class="k-table-tbody">
How to fix:
Fix any of the following:
Element has children which are not allowed: [role=gridcell]
Environment: Microsoft Edge version 136.0.0.0
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);
}