Hi,

Using KendoReact Scheduler component the functionality to group the events by date, then by resources is not supported. I can only group them by resources first, then by date.
This feature exists in Kendo for jQuery Scheduler component and can be configured by setting the group.date property to true as following:

 group: {
    date: true,
     resources: ["Rooms"]
   }

resulting in something similar as in the picture below.

We need the same functionality in KendoReact Scheduler component as well.

Thanks,
Camelia

hi,

I have attached the file there is a pie chart the labels are outside the pie chart, so I need the labels inside the pie chart ,

also in the bullet chart, I am unable to rid of the labels and title.  

thank you

Current Behaviour

When a table is created in the text editor and multiple columns are selected an error is thrown.

Errors:
TypeError: Cannot read properties of undefined (reading 'localsInner')

TypeError: Cannot read properties of undefined (reading 'eq')

Expected Behaviour

When a table is created in the text editor and multiple columns are selected an error must not appear and the user must be able to merge or split the cells.

MInimal Reproduction

I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-su15wr?file=app%2Fmain.tsx

Package
"@progress/kendo-react-editor": "^5.11.0"

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?

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

Hello,

when using the StrictMode we get an UncaughtError when using the PopupComponent. Fe. when using the Date/Time-Picker.

ERROR
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27287:11)
    at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25470:3)
    at Object.enqueueSetState (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14067:7)
    at Component.setState (webpack-internal:///./node_modules/react/cjs/react.development.js:355:16)
    at PopupWithoutContext.componentDidUpdate (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:285:18)
    at commitLayoutEffectOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23328:30)
    at commitLayoutMountEffects_complete (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24683:9)
    at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24669:7)
    at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24651:11)
    at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24607:3)


The above error occurred in the <PopupComponent> component:
    at PopupWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:97:28)
    at eval (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/Popup.js:38:67)
    at div
    at AsyncFocusBlur (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/AsyncFocusBlur.js:30:23)
    at TimePickerWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-dateinputs/dist/es/timepicker/TimePicker.js:87:28)
    at eval (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/withPropsContext.js:28:95)
    at component
    at Field (webpack-internal:///./node_modules/@progress/kendo-react-form/dist/es/Field.js:37:22)
  ...

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.

I've noticed in your other products, the dropdownlists have a property that allows for grouping sets of data. 

What would it take to get that included in Kendo UI React?

We have a use case that this would be very helpful.

Thanks.

Hello,

could you add remove / delete event to multiselect, like onRemove or something like that.

Now, because onChange event gives only the currently selected items, I need to do manual diffing what was the item that was removed.

If there were an event for remove / deletion of an item, it would be much easier to handle that.

Br, Miika

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

Currently, there is a following signature of function "rowRender" passed to React Grid:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;

I managed to access something which I assume represents this index somehow by using "row._owner.index" although I'm not completely sure if that is always identical to the index of the row being rendered.

It would be very helpful if an index of a rendered row could be accessed as follows:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps, index: number) => React.ReactNode;