As per the subject, you can no longer use the Calendar to select a date in a month before the currently selected Date. Please see the following demo:

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

Steps to reproduce:

• Click on the Calendar button
• Click on any month before the currently selected month
• Click on any date in the month
• Observe that the day is changed correctly but the month is incorrectly incremented by one

This error is not observed if you:

• type in a date
• use the mousewheel to scroll to the earlier date instead of clicking on the month
• use Firefox instead of Chrome

We aren't certain but don't believe this error was present before the latest Chrome 113 update. The error is reproducible in all versions of KendoReact from 5.2.0 onwards.

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

Hi,

I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:

Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells

Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>

These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>

However, there is a considerable amount of code required to achieve this:

const CustomCell = (props) => {
  const field = props.field || "";
  const value = props.dataItem[field];
  const navigationAttributes = useTableKeyboardNavigation(props.id);
  return (
    <td
      style={{
        color: value ? props.myProp[0].color : props.myProp[1].color,
      }}
      colSpan={props.colSpan}
      role={"gridcell"}
      aria-colindex={props.ariaColumnIndex}
      aria-selected={props.isSelected}
      {...{
        [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
      }}
      {...navigationAttributes}
    >
      {value === null ? "" : props.dataItem[field].toString()}
    </td>
  );
};

I would like to be able to define a template for a cell without having to specify these properties every time.

Kind regards,

David

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"

Hello, 

We have migrated to Kendo React (from jQuery) and are unable to use Directory upload functionality which existed in jQuery version:

https://demos.telerik.com/kendo-ui/upload/directoryupload

Currently in order to achieve such functionality, the only way is to inject required file input attributes manually as shown below:

    useEffect(() => {
        if (uploadWrapperRef.current) {
            const targetInput = uploadWrapperRef.current.querySelector('input');

            isFolder
                ? targetInput.setAttribute('webkitdirectory', '')
                : targetInput.removeAttribute('webkitdirectory');
        }
    }, [uploadWrapperRef, isFolder]);

This partially solves the issue, however because the directory upload functionality is not provided natively, we are unable to use drag-and-drop functionality for folders. There is no way to overwrite 'onDrop' functionality, which currently accepts only files but not folders.

Would it be possible to add Directory upload to KendoReact as well?

Kind regards,

Emil

https://codesandbox.io/s/keen-panka-vctttd?file=/app/main.tsx

In the attached video I am showing the steps taken to reproduce the bug from the reproduction link. Basically if you change the year in DatePicker's calendar - no matter which year you select - the year gets reset back to 1911. I was not able to reproduce this in Kendo's CodeSandbox examples until I noticed that they were using the legacy ReactDOM.render() instead of the new React 18's createRoot. As soon as I replaced it I was able to reproduce the bug.

Another strange observation is that I am able to reproduce this bug in only half of my tries after refresh, another colleague reproduces it in 20-25% of his tries, so it doesn't happen all the time but eventually it will. That's why I've recorded a video on a fresh reload of the attached reproduction. Also, you can sometimes see the year is already wrong after selecting it, or after subsequently selecting the month, or sometimes you don't see the year is reset to 1911 until after you select the specific date and the popup closes.

Although there are other ways to reproduce this issue, the one shown in the video is the easiest to hit the bad scenario. Also, we were not able to reproduce the issue on the DateTimePicker, although it seems to use the same Calendar component underneath.

Our assumptions having previously reported similar problems in Kendo after migrating to React 18 is that due to the concurrent rendering / batching of state updates in React 18's createRoot - something breaks the virtual scroll used in the calendar (in the video when I point to 1912 being the next year after the selected 2021, if we scroll a bit, the virtual scroll picks up and updates the incorrect years) so we end up with stale data for the year when selecting the month/date. This means that there might be other unwanted side effects that we just haven't stumbled upon.

This is a severe bug for our application's end users as they are unable to change the year in the date picker reliably. Falling back to the deprecated ReactDOM.render is not an option.

Hello,

How can I add tagRenderer to combo box?

There's option to add tagRenderer on multiselect, but at least I didn't see an option to add tagRenderer to drop down that allows only single selection.

Br,
Miika

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?

Issue 1:

I've implemented insert table tool in the editor and I'm setting some states on editor blur. The bug appears when the editor is focused and I try to add a table. When I select the rows and cols from the dropdown  and click to insert the table the editor blur is called my setStates are called and somehow the table insertion doesn't happen. In order to add the table I should not focus the editor and I have to click on the insert table button and select again the cols and rows.

Issue 2:

In the same editor I've added tableResizing plugin. The bug appears when I already have a table in the editor and open the insert table dropdown to add a new one. In that moment when the dropdown is still opened I hover over some of the already inserted table cells borders the insert table dropdown is closed.

Issue 3:

When the editor is controlled we have undefined as initial value and then we type something or try to add table for example the editor crashes and throw an error `Uncaught RangeError: Applying a mismatched transaction`. Even though the value type allows undefined EditorProps.value?: string | Node | undefined. It works fine though if the initial value is empty string.

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

Minimal reproduction
I'm providing an vite + react + ts project. Steps to run the project:
npm install
npm run dev

It's reproducible in the provided examples in StackBlitz from Kendo, but the editor packages are not always resolved with turbo package manager. I guess it's the same issue as https://github.com/telerik/kendo-react/issues/1530

The TreeList component has almost of all the same functionality as the Data Grid, but it lacks the ability to automatically resize the columns based on the content when clicking the table cell headers. The demo of the Data Grid Column Resizing shows this behaviour.  The jQuery TreeList also supports this behaviour.

It would be great if the KendoReact TreeList could also enable auto-resizing of columns in this way as it feels like the natural way to automatically set the size of columns.

Hello,

Seems the link to the GridColumnMenu accessibility page from the DataGrid accessibility page is broken. 

Our tools are also warning us about empty links, caused by the GridColumnMenu button. How would we solve these?

Thank you,

Kristiyan Dimitrov

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

I am using kendo react; how should I convert from a search query string into grid data state object? I am trying to get a query from URL and convert it into json object and pass it to the grid so it can do filtering, sorting, etc.

input can be the query strings below or URLSearchParams object.

const queryString = "sort=triggerAt-desc&page=1&pageSize=10";

?filter=(notes~contains~%27te%27~and~status~contains~%27up%27)&sort=triggerAt-desc&page=1&pageSize=10

The output should be:

{
    sort: [
      { field: "triggerAt", dir: "desc" }
    ],
    skip: 0,
    take: 10,
  }