We’re currently trying to make our website compliant with the WCAG standards, and right now it fails a few of the requirements. I'm wondering if these are problems with the Kendo grid itself or if you can help us debug something we're doing wrong in our implementation.

One issue was with checkboxes, which don’t seem problematic when I run an audit on the example, but did present issues when we used the same technique to add them in our own grid:
https://www.telerik.com/kendo-react-ui/components/grid/selection/

The other issues were with filters. This is the example that we referenced when adding filters to our code, which was a similar situation (no issues when we audit the example page, but shows issues when we audit our website):
https://www.telerik.com/kendo-react-ui/components/grid/filtering/

 
This is the breakdown of issues I came across:

Issue 1: Form elements must have labels - checkboxes
As I mentioned above, we added checkbox selection to the table following this example: https://www.telerik.com/kendo-react-ui/components/grid/selection/

However, we're seeing "form elements must have labels" issues on all of the checkboxes when we run an audit.

Issue 2: invalid values for 'aria-owns' and 'aria-activedescendant' attributes on filters
This problem applies to each of the built-in filter dropdowns (I added filtering following the example linked above).
The attached image named issue2 has a more detailed breakdown of this issue, but TLDR: the validator says the issue is that "the aria-owns attribute must point to an element in the same document"

Issue 3: Form elements must have labels - inputs for filters
The attached image named issue3 has a more detailed breakdown of this issue.

Issue 4: Form elements must have labels - filter dropdowns
The attached image named issue4 has a more detailed breakdown of this issue.

-----------------------------------------------------------------------------------------------------------
Things I’ve already tried:
I tried upgrading Kendo to the latest version via npm (https://www.npmjs.com/package/@progress/kendo-react-grid) to see if the problems were fixed, but my audit showed me the same issues I had seen and more (this time issues with column titles).

Relevant parts of the code:
I edited out some helpers, handler functions, column setups, etc that don’t seem relevant. Please let me know if there's something else you want to see!

In the JQuery Kendo Chart, I was able to have 2 Y axes, one on the left and the other on the right side of the chart.

How would I go about doing this in the React Chart control? I tried setting the axisCrossingValue but didn't have any luck.

Is this feature available?

     Hi, I have a dropdown rendering a list from an array of objects. I have used the prop 'defaultValue' to have a value preselected while loading. I want to implement a clear button functionality where clicking the button resets back the selected value to the default value. Please advice.

Here is the stackblitz url: https://stackblitz.com/edit/react-xzennu?file=app/main.js

-how to change the GridToolbar position, because by default this is rendered above the grid, and i need render that below the grid?

my solution is put the GridToolbar outside the grid object

-also i need change the GridToolbar height to fit with the size of my buttons

BR

As far as I can see, Kendo UI React has no "itemDisabled" prop for "DropDownList", but in Angular version it has. Will it be implemented in React?

For now, I've created such workaround. But there is one drawback: the dropdown after choosing disabled item is closed. How to avoid it?

Thanks in advance.

P.S.: here you use "renderValue", but in the demo on stackblitz you use "itemRender". Please, fix it.

Hello,

We have a dynamically created Grid for which we need to have an Excel Export. The code below returns an empty excel file (no data). What are we doing wrong?

// Parent file

import ClickTrackingGrid from './common/Grid';

import { ExcelExport } from '@progress/kendo-react-excel-export';

export default class EmailClients extends React.Component {
     _export;

     constructor(props) {
             super(props);

              this.export = this.export.bind(this);

    }

    export() {
             this._export.save();
    }

    render() {

             <button title="Export Excel" className="k-button k-primary" onClick={this.export}>Export to Excel</button>

             <ExcelExport data={this.props.ctGeographGeoFigures} ref={(exporter) => { this._export = exporter; }}>
                  <ClickTrackingGrid dataSource={this.props.ctGeographGeoFigures} />
             </ExcelExport>

    }

}

// ClickTrackingGrid file

import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-grid-react-wrapper';

export default class ClickTrackingGrid extends React.Component {
       render(){
                 const { dataSource } = this.props;
                 var allColumns = dataSource.length > 0 ? Object.keys(dataSource[0]) : [];
                 var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);
                 return (
                           <Grid dataSource={dataSource}>
                                        { columnsToShow }
                           </Grid>
                );
      }
}

I'm facing an issue where I have properties on my objects that contain a datetime, with a specific time. When I try to filter on these columns in the grid they wont be matched properly since the date used for filtering has the time set to 00:00:00. Is there a prop or option to pass the column somehow, to make sure that time is also being taken into the filtering process?

Thanks!

How can I add a theme, which only apply for the Kendo UI React Editor in a component and not globally?

I want to be able to set height and width etc.

I am trying to enable filtering on a date field. Everytime I hit the calendar filter I get

TypeError: Cannot set property 'getCurrentStack' of undefined
sp-webpart-workbench-assembly_en-ie_ece526ae9c4505c559f829872676137b.js:190
TypeError: Cannot set property 'getCurrentStack' of undefined

Any help would be fantastic