I am using KendoReact Draggable and Droppable and we find a bug when using it. This bug even happen in the official demo.

The bug is described below:

When a droppable area is rendered out of the originall window size, the droppable cannot detect the onDragEnter() & onDropLeave(), of course onDrop neither.

it seems that kendo did not handle when user scroll while dragging the draggables, so that when the draggables was dragged to a zone out of the original window size, it failed to detect it.(Figure4)

I have also found another bug which is when you drag the draggables and scroll, the draggable will somehow detacted with the cursor, but I somehow already fixed it. Maybe it gives some hint for you to fix this bug, maybe.

Hi

I noticed in the PDF Export component limitations (https://www.telerik.com/kendo-react-ui/components/drawing/limitations-browser-support/) that it does not support iFrames. This is a major issue for us as we have data containing full HTML markup and <style> tags, which we want to embed in a PDF. We need to use an iFrame otherwise the styles will bleed into the rest of the document. Is there any plans to support iFrames in the future?

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.

The feature request:

Kendo react scheduler: in a week/work week view if an event created with start time at 01:00 and ends at 23:00 for example and displayed only working hours:

the event will not visible until we enable all days hours visible:

The issue is described here:

https://www.telerik.com/forums/kendo-react-scheduler-issue-event-is-not-visible-if-start-date-outside-of-working-hours-range

Currently, the category value in the tooltip does not display the formatted value and the only option for changing this is by using the "render" and defining custom rendering. The formatted value should be used by default.

Hi Team, 

There is some unexpected behavior when resizing events after switching the Scheduler to 'Show Full Day'. Take a look at my sandbox, you'll notice, its barely anything, let alone anything fancy.

Replicate:
1. Create a new event that starts at 8am.
2. Switch the view to 'Show Full Day'
3. Using the start time resize handle and drag it up, to start earlier. And you will notice the dragItem actually drags down, and when you release the handle, the event appears in the correct place

This will only happen on the first resize when switching to 'Show full day'. You can replicate it more by switching back and forth between full day and business hours.

Similar Scenarios include:
1. Placing the event to end at 8am, switching to business hours and back, then drag the end time down, the dragItem will be positioned to start at 8am, but say its 7am and you will see the rest.
2. Placing the event to overlap 8am, will yield both problems.

Again this only happens on the first resize after switching views, and I've only tested it in DayView, so it might affect WeekView as well. There appears to be no issue when events overlap the endWorkTime.

Thanks,
Grant

Hi.

I would like to request the support of JsonSchema when creating a Form with the KendoReact Form component.

Maybe something along the lines of react-jsonschema-form, only with integration of the Kendo Form components, like inputs, dropdowns, buttons and other components that are possible to be used in a form.

The reason for the request is that we would like to be able to build our forms dynamically based on jsonSchema information that comes from a backend.

Thanks,

Greetings,

Bernd

Hi,

Please see the following example of the Upload component being used to transfer a single file to a byte array:

https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx

Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.

Now please see the exact same example but switched to the new createRoot API:

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

Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.

I believe this is because of automatic batching in React 18.

Kind regards,

David

Hello,

Currently, it is possible to switch between both numeric and input types in Kendo grid pagination but in our application we have design to display both numeric and input control types on load. so request to please help with that feature.

Thanks

Request to have the sliderbar have different colors. It is for user experince, knowing that the slider is going either to the sucess or fail.

I have attached files, in which there is an app bar content there is a dropdown in the dropdown there are four elements, in that I need four drawer container on the left side as I attached by clicking the single dropdown, how can I attach 4 drawer container in a single project 

Thank you

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

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

It is a common use case to provide Grid's dataItemKey property to make sure changes are properly reflected per documentation - https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey

However, when this accessor property is provided (usually a unique ID on all groups and items), Kendo uses it instead of its default auto-incremented `'ai' + absoluteIndex` key to index the <GridRow /> for each group's header and footer - giving them the same value and causing React to throw multiple warning about duplicate keys. This makes it unreliable to specify dataItemKey property when using the grouping feature with aggregate footers as it messes up with React's reconciliation mechanism.

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

After significant amounts of negative feedback we have now stopped using the KendoReact DatePicker as the calendar part of the control doesn't make it clear how to change the month/year. I am aware that you click on the {Month Year} label at the top, but this is obviously not intuitive at all based on the extensive user feedback (it took me a while to figure out the first time as well).

When you start using the control for older dates (e.g. Date of Birth), scrolling is just not feasible particularly on mobile and so users get incredibly frustrated as they just want to change the month/year in a more manual manner to go back in time significantly. Many other date picker controls use visual cues such as up/down carets next to the Month/Year to suggest it can be adjusted.

Please get your UX experts to look at improving this as it could be a really simple fix that would make a massive difference to users