Issues reported in GitHub too. Grid is failing accessibility. · Issue #1575 · telerik/kendo-react (github.com)
During accessibility testing, there are 5 violations. The violations are:
And when add footerCell
to only some of the columns, elements in .k-grid-footer
have several violations
aria-allowed-attr
in footer cell which column has no footerCell
property.
.k-table-td[aria-colindex="1"][role="columnfooter"]
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
aria-allowed-role
in colgroup in footer.
.k-grid-footer-table > colgroup
<colgroup role="presentation">
aria-roles
in footer cell which column has no footerCell
property.
.k-table-td[aria-colindex="1"][role="columnfooter"]
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
In pagination, the pageSize selector also have a violation.
aria-input-field-name
: I guess it's because the span element have an input type role, but didn't meet the needs of an input..k-pager-sizes > .k-dropdownlist.k-picker-solid[role="combobox"]
<span class="k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid" tabindex="0" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns="d22e899f-3cc6-49c4-a4d2-d6153e17a2f6" aria-describedby="ea34d15b-a71a-48fa-a95d-d773f6fcb50a">
Package version: "@progress/kendo-react-grid": "^5.11.0"
. By the way, I checked the changelog and there is no related update.
Thanks for your help.
Hello.
It's a picture that I want to make.
I want the chart to show two values and one should be shown above the chart and the other should be shown below.
I tried using the stack chart, but it didn't work out the way I wanted it to.
Can you make it like a picture using Kendo?
Hello Telerik Support Team,
is it possible to customize the filter values of a GridColumnMenuCheckboxFilter to include spaces in the rendering and then arrive in the backend without it.
Otherwise the assignment to the corresponding member does not work correctly in the backend and the filter then follows the convention "no spaces" in the FE, which leads to not nice display values.
Here is a screenshot of the described scenario:
Thanks in advance
Hi
I couldn't manage to add a custom filter cell (ex: Dropdown) to the example in the Local Data Operations page on Kendo React Components section which contains all the other table attributes together like paging, sorting and filtering as i need to use it like this.
How can i achive this?
Thanks in advance.
I'm having this issue once again. See package.jons inline:
{ "name": "web-parts-collaboration", "version": "0.0.1", "private": true, "engines": { "node": ">=0.10.0" }, "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@microsoft/sp-core-library": "1.7.1", "@microsoft/sp-lodash-subset": "1.7.1", "@microsoft/sp-office-ui-fabric-core": "1.7.1", "@microsoft/sp-webpart-base": "1.7.1", "@progress/kendo-data-query": "^1.5.2", "@progress/kendo-react-buttons": "^4.0.0", "@progress/kendo-react-dateinputs": "^4.0.0", "@progress/kendo-react-dialogs": "^4.1.0", "@progress/kendo-react-dropdowns": "^4.1.0", "@progress/kendo-react-grid": "^4.1.0", "@progress/kendo-react-inputs": "^4.0.0", "@progress/kendo-react-intl": "^4.0.0", "@progress/kendo-react-layout": "^3.3.0", "@progress/kendo-theme-default": "^4.2.0", "@types/es6-promise": "0.0.33", "@types/react-dom": "16.8.0", "@types/webpack-env": "1.13.1", "moment": "^2.24.0", "react": "^16.8.2", "react-dom": "^16.8.0", "typescript": "^2.4.1" }, "resolutions": { "@types/react": "16.8.2" }, "devDependencies": { "@microsoft/sp-build-web": "^1.7.1", "@microsoft/sp-module-interfaces": "1.7.1", "@microsoft/sp-tslint-rules": "1.7.1", "@microsoft/sp-webpart-workbench": "^1.7.1", "@types/chai": "3.4.34", "@types/mocha": "2.2.38", "ajv": "~5.2.2", "gulp": "~3.9.1" } }
And here's the errors I'm receiving:
[11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected. [11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected. [11:01:07] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-grid/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,293): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,309): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,319): error TS1005: ',' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,325): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,327): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,336): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,344): error TS1005: '>' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,352): error TS1005: '=' expected. [11:01:08] Error - [tsc] node_modules/@progress/kendo-react-inputs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,391): error TS1109: Expression expected. [11:01:08] Error - 'tsc' sub task errored after 6.04 s exited with code 2
Here is the contents of one of the dispatchEvents.d.ts files:
/// <reference types="react" />
import { BaseEvent } from './BaseEvent';
/**
* @hidden
* Dispatches a new event bsed on an event that was already internally dispatched to KendoReact users.
*
* @param eventHandler - The public event handler that is assigned by the user.
* When undefined, the method is not an option.
* @param dispatchedEvent - The event that was already dispatched internally.
* @param target - The target component of the new event.
* @param eventData - The additional data that will be passed through the new event.
* When the new event has no additional data
* other than the `BaseEvent` arguments, pass `undefined`.
*/
export default function dispatchEvent<E extends BaseEvent<React.Component>>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component>>>): void;
//export declare function dispatchEvent<E extends BaseEvent<React.Component | FCHandle>, FCHandle = object>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>>>): void;
I tried both "export" lines to no avail. Please advise as to what you think may be the issue. Thank you
Hi Team,
My goal is to add a popover whenever a user hover on a scheduler item. I was using kendo tooltip until now but now the requirement is to use html tags in the tooltip content plus the content can be large sometimes so obviously I cant put it over title of a parent div to get the content for the tooltip.
I have added a popover after <Scheduler> component and the content of this popover is coming from the <SchedulerItem> children prop. Im creating the content for the popover inside <SchedulerItem> and on onmouseenter Im setting the content of popover in the local state and then that local state is remdered inside the popover . Things are working as expected but the popover is not opening as tooltip, the position of the popover is random. I tried to use the currentTarget’s boundries to calculate the offset from left and top but still unable to make the position look like kendo tooltip. I am new to ref thing so it would be really helpful you can provide the code for class based components.
Note: Im calling the <SchedulerItem> as a function not as a seperate class. A functiom in the same class is returning <SchedulerItem>.
Hi support team,
I am working Scheduler Kendo React. I am using custom form to insert/update data. I want to use recurrent event feature in my custom form. Current document only write about how to show occurrence event not about insert/update. Could you please guide me how I can add these components to my custom form and how to insert/update recurrent event for both mode(current occurrence / series) ?
Hi, im a new to this filed, kindly bare my knowledge.
At my work, I am drawing the line chart with x-axis as a date.
But I would like to skip the labels that i do not have.
Is there a way? If so, would you kindly share the docs or samples that can help me?
<Current - there is a range of date between two peaks in x axis>
<What I want - created by Excel with random number where there is no range of date between two peaks in x axis. only have x-axis that i have in my data>
I'm currently working with kendo react pivot grid local data binding, now I'm facing a trouble when i try to multiple measures with same aggregation on different axis.
i tried something like this, but getting value of Y and UNITLY combined (eg: LYUnit = 5, then Y showing 10 and UNITLY showing 10 instead of Y showing 5 and UNITLY showing 5). i want to make each of them have different sum aggregation. Anybody got an idea?