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.

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

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 have problems with the grid because for no reason a 'display:none' appears, specifically in this creation action

We can't understand when the error might occur, we think it's a coincidence of class names.

Can you guide us through this error?

Integrated tooltip to react data grid, but when I drag & drop column header to group it by column, It displays the tooltip text instead of column field title

Hi, 

I'm working on a grid which has an action cell with buttons, which of course i dont want to export, but when i try to pass a custom column configuration to the export it fallbacks to the grid's one.

I made further investigation on the kendo-react-private repository and i found out that effectively there's a preference for the grid columns rather than custom

more precisely on kendo-react-private>packages>excel>src>ExcelExport.tsx (line 201~206)

const columns = this.extractColumns(
            gridColumns ||
            externalColumns ||
            this.props.columns ||
            React.Children.toArray(children)
        );

this is the piece of code i was talking about.

as you can see if gridColumns has a value is preferred rather than externalColumns

it would be nice to have a property onto the grid column definition stating if that column should be exported or not (best case)

or just preferring externalColumns to gridColumns (base case)

Title:
[Answers Community: Ask a question]: Unable to navigate and access the 'Remove' button using keyboard.

Test Environment:
Windows 11 OS version:22H2 22621.1992
Edge Version 114.0.1823.82(Official build) (64-Bit)

Repro-Steps:
1.  Open https://www.telerik.com/kendo-react-ui/components/upload/url.
2.  Navigate to 'select files..' button using arrow key and invoke it using enter key.
3.  Upload any file.
4.  Now try to navigate using tab key and access 'Remove' button using keyboard and check whether its accessible or not using keyboard.

Actual Result:
Unable to navigate and access the 'Remove' Button using keyboard.


Expected Result:
User should be able to navigate and access the 'Remove' button using keyboard.

User Impact:
User with motor impairments who rely on keyboard will not be able to access 'Remove' button if user is not able to navigate to the button using keyboard.

Environment (OS, Application, Versions)

Repro Steps

1. Open URL: Column Menu - Kendo React (telerik.com)
2. Navigate to context menu controls available on column headers of Basic usage table.
3. Verify if context menu is accessible using keyboard.

Actual Results

The 'context menu' controls available on the column headers under the basic usage table are not accessible using the keyboard.

Expected Results

The 'context menu' controls available on the column headers under the basic usage table should be accessible using the keyboard.

Hi team, 

Im my example (see here), I've added a 'name' attribute to the 'Persons' resource data, and changed the textField mapping to use the 'name' field, however the scheduler is still displaying the results of the 'text' attribute. 

Leading me to think that the scheduler is hardcoded to only look for the text attribute, because if its changed/removed, the scheudler does not display anything, regardless of what the 'textField' value is.

Please advise.

Thanks,
Grant

Hello? I want to set up drag and drop events from a grid's data to a treeview in React. I used to implement this with Kendo jQuery, but it seems that React doesn't provide this functionality.

Hello,

We have recently upgraded our packages to version: "@progress/kendo-react-grid": "^6.1.0". While testing the new look and feel of the application we've noticed that the pagination is no longer working on several grids from the application. After investigating for a while, we have found the property that is causing the issue(rowHeight), please take a look at the Stackblitz example from below.

https://stackblitz.com/edit/react-wwzkjy?file=app%2Fmain.tsx

As you can see, in the example the pagination is not working. If we remove the property "rowHeight" from the grid the pagination is working again. We are not sure how these two are related but can you tell us what is going wrong and how we can fix it?

Thanks!

In the kendo-react-data-tools component, we want to introduce the Autocomplete behavior in Fields.
For example, in the https://www.telerik.com/kendo-react-ui/components/datatools/ link, only 3 fields ( like Name, Price and Discontinued ) were used.

In our application, we have more than 100 fields and the user has to scroll all the way down to pick the required field for applying the filter.

This is a bug on your documentation website.

Go to https://www.telerik.com/kendo-react-ui/components/grid/ for example to see that the side panel on the left is empty in an Edge browser. It flickers then it disappears.

It works fin in Chrome and Firefox. 

Environment (OS, Application, Versions):

OS Version: 22H2 (OS Build 25352.1)
Edge Dev: Version 121.0.2277.112 (Official build) (64-bit)

Repro Steps:

   1. Open https://codepen.io/oneID/pen/LYaGREP and turn on NVDA.
   2.Navigate to Populate grid and activate it using enter key.
   3.Navigate to Expand button under domain in export to excel table.
   4.Verify if the accessible name and role for the expand button is correct or not.

Actual Results:

Accessible name for the 'expand' button is not correct, Expand button is defined as link.

Expected Results:

Accessible name of 'expand' button should be sufficient for screen reader user. Accessible name should contain value available in domain as well.

Role should be defined as 'Button' as its behaving as button.