Hi, when using the Kendo React Typography component like following:

<Typograpy.h1></Typograpy.h1>

compiler gives the following warning:

Imported JSX component h6 must be in PascalCase or SCREAMING_SNAKE_CASE                                                                       react/jsx-pascal-case

We need to customize our exported excel to contain some additional information to the top rows of the excel sheet.

On using 'filterable' option as true in ExcelExport React component, it's getting applied on the first row but we want those filters to come on header values present on the 2nd/nth row in case we have some additional information on the top rows.

<ExcelExport
                    data={data}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                    filterable={true}
                >

Please refer the attached snapshots for actual and expected results needed from customization.

Given the simple example:

const RatingContainer = () => {
  const [ratingValue, setRatingValue] = useState(0);

  const clearRating = () => {
    setRatingValue(0);
  }

  const onRatingChange = (event) => {
    setRatingValue(event.value);
  }

  return <div>
    <Rating 
      value={ratingValue}
      onChange={onRatingChange}
    />
    <Button
      onClick={clearRating}
    >
      Clear
    </Button>
  </div>
}

export default RatingContainer;

The Rating component behaves as expected when updating `ratingValue` through the Rating component. However, when I want to clear the rating value with the 'Clear' button to update the `ratingValue`, the number of stars displayed doesn't update reflect the value of `ratingValue`.

Here is a subsection of my package.json file.

   "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-react-animation": "^5.13.0",
    "@progress/kendo-react-buttons": "^5.13.0",
    "@progress/kendo-react-charts": "^5.13.0",
    "@progress/kendo-react-common": "^5.13.0",
    "@progress/kendo-react-data-tools": "^5.13.0",
    "@progress/kendo-react-dateinputs": "^5.13.0",
    "@progress/kendo-react-dialogs": "^5.13.0",
    "@progress/kendo-react-dropdowns": "^5.13.0",
    "@progress/kendo-react-editor": "^5.13.0",
    "@progress/kendo-react-excel-export": "^5.13.0",
    "@progress/kendo-react-form": "^5.13.0",
    "@progress/kendo-react-grid": "^5.13.0",
    "@progress/kendo-react-indicators": "^5.13.0",
    "@progress/kendo-react-inputs": "^5.13.0",
    "@progress/kendo-react-intl": "^5.13.0",
    "@progress/kendo-react-labels": "^5.13.0",
    "@progress/kendo-react-layout": "^5.13.0",
    "@progress/kendo-react-listview": "^5.13.0",
    "@progress/kendo-react-notification": "^5.13.0",
    "@progress/kendo-react-pdf": "^5.13.0",
    "@progress/kendo-react-progressbars": "^5.13.0",
    "@progress/kendo-react-tooltip": "^5.13.0",
    "@progress/kendo-react-treelist": "^5.13.0",
    "@progress/kendo-react-treeview": "^5.13.0",
    "@progress/kendo-react-upload": "^5.13.0",
    "@progress/kendo-svg-icons": "1.4.2",
    "@progress/kendo-theme-bootstrap": "^5.2.0",

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)

When using the <Window> component, there is an issue trying to maximize, when a parent element has positioning (ie:  position: absolute, position: relative).  The calculation for defining the width uses window.innerWidth (similar for height).  However, for placement, it uses top and left = 0.  

You can see a sample of this on StackBlitz:

https://stackblitz.com/edit/react-59kqss

This is a straight copy of https://www.telerik.com/kendo-react-ui/components/dialogs/window/controlled-mode/, but added the additional styles to the parent <div>.

Version is 3.14.

Thanks.

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

@progress/kendo-react-dateinputs": "^4.3.0"

DatePicker and DateInput React components malfunction when rendered inside iFrame.

For example, key navigation between date parts is not working for the DateInput/DatePicker rendered inside iFrame.

When user clicks on the month part of the date, the month part does not get selected.

Same for day or year part.

The reason is a code similar to this in DateInput.js:

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

if (document.activeElement !== _this.element) 

This code references the top level "document".

If the React component is rendered inside iFrame, we need to use the contentDocument of the iFrame to have this code working as expected.

Could replace "document" with "_this.element.ownerDocument" to make it work inside iFrame as well as in the top level window.

Now "document.activeElement" always returns the reference to the iFrame element rather than the expected date input element inside iFrame.

If the datagrid inside popup is wider than max screen width, then there is no scrollbar to scroll it horizontally, which means user cannot see the whole datagrid.

When I tried to somehow hack it and set max width of 100vw for the datagrid, then it partially worked - the content could be scrolled horizontally, but the header remained static; position of header cells didn't match positions of scrolled body cells, which would be confusing for the user.

How to reproduce:

1. Open this link: the componet preview

2. Set screen width to 500px.

3. Open the datagrid using the input arrow button.

Result:

The datagrid is truncated horizontally.

Expected:

The datagrid can be scrolled horizontally..

Add render prop for the SplitButton.

This will allow changing the main button and also the button that opens the DropDownList.

It's annoying because:

1) Every time I go to a new page or refresh my browser it comes up bright yellow

2) It blocks the search bar which I use a lot

3) The seminar is over which just annoys me more

I'm OK if you want to tell me once like a privacy notice, but don't tell me every time my web page refreshes and overwrite part of the page.

Hello

Currently, the KendoReact Grid can only select all columns as shown in this demo:

https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection

We wish to be able to select only specific columns programmatically. 

All of the Kendo components that "hide" content (tab views, collapse panels, etc) don't actually hide any content. They require us to not render any children.

<ExpansionPanel
  {expanded === item.id && (
    <ExpansionPanelContent>

This just strikes me as an odd design decision. I guess I don't understand the point of these components if they don't do the 1 thing they are supposed to do; hide portions of the content.

Un-rendering the content is usually not desirable. The contents are often still important. Possibly for SEO purposes, A11y, or if they are part of a Form:

<Form
  render={() => {
    <FormElement>
      <ExpansionPanel>
        {expanded === item.id && (
          <ExpansionPanelContent>
            <Field
                name={"firstName"}
                component={Input}
                validator={() => 'always invalid'}
              />
          </ExpansionPanelContent>
      </ExpansionPanel>
    </FormElement>
  }}
/>

This makes the Form valid as long as the panel is collapsed.

Can check out how Bootstrap collapse panels work to see how most people would expect these components to behave. The contents is rendered into the DOM and JS and CSS are used to hide it. There should be a way to achieve this same behavior with Kendo.

As a workaround I end up having to do my own CSS/SASS to hide the contents

.k-expander {
  .k-expander-content-wrapper {
    height: 0;
    overflow: hidden;
  }

  &.k-expanded {
    .k-expander-content-wrapper {
      height: auto;
    }  
  }
}

A few suggestions for the React Grid (as of v5.0.1) to help devs conform to accessibility compliance...

1) Standard HTML tables can contains a <caption> element, which screenreaders will use as the descriptive name of the table. Kendo Grid does not appear to have any way to name the table.

2) Related to number 1, other ways to assign a descriptive name to a table may be to include a `title`, `aria-label` or `aria-describedby` attributes, but none of these work on <Grid>. They are not rendered into the HTML if passed as props.

3) Allow GridCell and other Cell components to take `children` to render. The current documentation generally advises us to override the `cell={}` prop on a GridColumn for custom cell rendering. What is not listed in the docs is that doing what seems like the obvious thing:

<GridColumn cell={() => <td>myContent</td>} />

actually breaks accessibility. At a minimum the cell MUST get the attributes

            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}

to have the table actually be represented correctly in most screen readers. The Kendo <GridCell> component would normally add these, but only renders the field from the dataItem. It can only render custom data if the `render` prop is set, in which case it yet again does not render the `<td role= aria-colindex=` portions on it's own.

What I'm getting at is, everyone who ever wanted to render a custom cell in Keno Grid always had to make their own cell component that added at least the `role` and `aria-colindex` attributes, and if they didn't, they probably unknowingly broke accessibility.

Kendo could make this clearer in the docs (including the accessibility page for the Grid), and could easily alter GridCell to render `children` if they are passed. Then we could do:

<GridColumn cell={<GridCell><button>yay</button></GridCell>} />

and have the rendered HTML:

<td colSpan="1" style="" class="" role="gridcell" aria-colindex="1" aria-selected="false"><button>yay</button></td>

I think in GridCell this would be as easy as changing:

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {dataAsString}
          </td>

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {children || dataAsString}
          </td>

Dear Support Team,

 I have numbers of kendo charts in my app, but I need to modify the boder-radius for the tooltip of my donut chart.

I've checked, with the browser, the existence of a couple of CSS classes I can work on, but they are generic and they work for all the charts in the app:

.k-sparkline-tooltip-wrapper>.k-popup, .k-chart-tooltip-wrapper>.k-popup (classes for the ChartTooltip component: for this I can ad an ID)

Inside this component the Kendo library creates a new component, which I can't configure any IDs on and owns the css class k-chart-tooltip k-chart-tooltip-inverse needed to override the border-radius property.

Is there a workaround or any other configuration to set the border radius for a tooltip of a single chart, without modify all other charts in my app?

Thank you

Kind regards

 

Hello, 

I'm trying to implement an accessible table using your Grid React component. The idea is for the users to be able to navigate the table using the keyboard if need be. Because we are a government contractor we have to make our product accessible and, testable using the Government issued tool for testing, ANDI. 

When I use a normal table, I can implement scopes in the table header, either for the column or the row and thus create relationships between headers and cells as well as, use the keyboard to navigate the entire table.

When the same table is implemented with the Grid component, there are no scopes in the header then again, both header and body are separate even though they reside inside a div with role=grid on it which in turn, contains two divs, one for the header and one for the body each in turn, implementing a table: one for what would be the headers and one for what would be the body. I'm attaching screenshots even though I'm sure you know the product.

The fact that both the <thead> and the <tbody> reside in different places, even though they are within the grid, makes it impossible to add associations furthermore, we're using a data-table and the grid. I tried using different props but, as long as both the header and the body are separate, the ANDI tools can't find the table.

Question is, is there a way to make this table truly accessible just as a one created using the semantic table tags?