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)">

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,

I'm creating a Numeric Textbox that should be able to accept Empty.  How do I add a ClearValue button in a Numeric Textbox?

We will be calling an external GenAI and would like the result to be displayed as animated, generated text like you see with Gemini or ChatGPT.  Can the speed be adjusted to mimick this?

On a related note, i would like the response to animate the scroll bar as it does in the examples, but stop when the last message hits the top of the view pane if that message is longer than the pane height, so the user can start reading it and then scroll to read the rest. otherwise, they have to scroll up to read the beginning of the message.

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).

I am currently working on a piece where the user can Import an Excel Sheet, Modify and Validate it then Upload it to the backend service.

I have used an Upload Component to load the file into the spreadsheet and Upload when prompted by the user and this is working fine, but any modifications in the Spreadsheet Component will not be sent

I was wondering if its possible to upload the modified spreadsheet to a backend service.

You can only seem to Export it back out to a local file.

I have also tried the ProxyURL which could be a possible solution, but it navigates away from the current page and didn't seem to trigger the interceptor to add our auth headers

Is there a way to get the data behind the spreadsheet component or convert it to a base64 string, Blob or File?

Hi, 

I have few questions regarding kendo grid, i have implemented kendo grid for three nested levels, in every level it has checkboxes, i want to do if i select the parent level checkbox, it should  expand its child and all child checkboxes should also selected, is it possible in kendo-grid??
if so do you have any demo link?

i have attached the image for you understanding, but in that it has only one level, in my case i have two nested levels

Thank you