My team is using KendoReact Gantt to build a web app for manage/planning task in Scrum

It is nice to have feature which display and customizable the current time marker on Gantt.

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.

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

It would be nice to have natively some kind of copy-paste of data between excel and kendo 

more and more clients are requesting this feature but currently it is pretty difficult to implement..

being more specific the expected behavior should be:

user copying a range of cells from excel

pastes it into a grid cell 

data should spread starting from the cell where it was pasted and inserting new rows if there are not enough to contain all the content

then user should be able to copy a range of cells/rows or a single row and paste it to excel

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"

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

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

We currently keep an image library for our customers where we allow them to upload images for use in the editor. Our existing implementation uses something called tinymce and MoxieManager. I see that the jQuery implementation has something similar, but it is not included in the react toolset. 

Can we get the ImageBrowser / FileBrowser part of the jQuery Kendo ported over to the react version?

I have attached an image for example.

As it happens, none of the existing ways of setting icons in the Button component work with either of the icon libraries we are using, which are:

1. Google Material Symbols, which uses ligatures to select icons rather than class names.
2. Material Design Icons via @mdi/react and @mdi/js, which renders programmatically generated inline SVGs.  These icons technically can be downloaded as finished SVGs for use with the imageUrl property, but only a single icon at a time, which is significantly less convenient than having access to the entire library at once when using the @mdi packages.

Rather than try to separately add specific support for these (and a thousand other) icon strategies, however, you could add support for both (and a thousand others) at once by just having something like an iconJsx property.  It would accept JSX.Element, and whatever it is given gets rendered inside the span.k-button-icon.k-icon.

So you could do something like this...

<h1>How will you attack?</h1>
{/* Google Material Symbols */}
<Button iconJsx={<span className="material-symbols-outlined">local_fire_department</span>}>Fire Breath</Button>
{/* @mdi/react + @mdi/js */}
<Button iconJsx={<Icon path={mdiKabaddi} />}>Target Weak Spot</Button>
{/* A poop emoji */}
<Button iconJsx={<span role="img" aria-label="poop">💩</span>}>Bio Weapon</Button>

To get something like this...

<h1>How will you attack?</h1>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span class="material-symbols-outlined">local_fire_department</span>
  </span>
  <span class="k-button-text">Fire Breath</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <svg viewBox="0 0 24 24">
      <path d="M11.2 10.6C12.2 11.6 13.4 12.1 14.8 12.1L14.9 14.2C13 14.2 11.3 13.5 9.8 12.1L9.1 11.4L6.8 13.8L9 15.9V21.9H7V16.7L5.7 15.5V17.7L1.5 22L.1 20.6L3.7 17L2.5 13.5C2.3 12.9 2.6 12.4 3.1 12L6.4 8.7C6.8 8.2 7.3 8 7.8 8C8.3 8 8.6 8.1 8.9 8.3L11.2 10.6M24 11.9H22V8.5L20.2 7.8L21.1 12.2L22.1 17.4L23 21.8H20.9L19.1 13.8L17 15.8V21.8H15V14.3L17.1 12.3L16.5 9.3C15.9 9.9 15.2 10.5 14.4 10.9C13.5 10.8 12.6 10.4 11.9 9.7C13.5 9.4 14.6 8.6 15.3 7.4L16.3 5.8C16.9 4.8 17.8 4.5 18.9 5L24 7.2V11.9M11.4 4.4C12.5 4.4 13.4 5.3 13.4 6.4C13.4 7.5 12.5 8.4 11.4 8.4C10.3 8.4 9.4 7.5 9.4 6.4C9.4 5.3 10.3 4.4 11.4 4.4M16.5 .3C17.6 .3 18.5 1.2 18.5 2.3C18.5 3.4 17.6 4.3 16.5 4.3C15.4 4.3 14.5 3.4 14.5 2.3C14.5 1.2 15.4 .3 16.5 .3Z" style="fill: currentcolor;"></path>
    </svg>
  </span>
  <span class="k-button-text">Target Weak Spot</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span role="img" aria-label="poop">💩</span>
  </span>
  <span class="k-button-text">Bio Weapon</span>
</button>

We are currently on implementing a component for data grids using the Kendo React Grid and virtual scrolling.
The problem is that the "page down" and "page up" is not working correctly, because of the virtualization (We already contacted the support for it).
Here is a stackblitz where the problem can be reproduced: https://stackblitz.com/edit/react-rapzu9?file=app/main.tsx
Reproduction steps:
1. Click inside the grid
2. Press "Page down" - Page changes, but focus goes to the header cell
3. Press "Page down" again - Nothing happens

Another problem which maybe has the same source is navigating with the arrow keys.
Reproduction steps:
1. Scroll somewhere deeper down
2. Use arrow up to scroll up again
3. At some point it scrolls not up anymore but the focus also changes into the header cell - Not okay

In my opinion its a bug, at least for the arrow keys. If you disagree please open a feature request for it, this functionality will be needed by out customers.

Best regards

Yui

After updating the kendo version in my project to "^5.1.0" I've noticed that both grid pager dropdown and normal dropdowns won't close when clicked outside if the dropdown is opened using the arrow icon.

I've attached a video with the issue.

Is there any workaround for this?

Hi,

The Telerik example for Inline Editing with Custom Editors uses a dropdown list with reference data hardcoded into the custom dropdown cell. This isn't a realistic scenario for for production code with dynamic reference data. If you pass the reference data for the dropdown to the custom cell then the dropdown loses focus every time you change the selected value. This can be seen by shifting the localizedData in the Telerik example referenced earlier from myDropDownCell.tsx to main and passing it as a parameter: https://stackblitz.com/edit/react-9ycz1i?file=app/main.tsx

Is there a workaround for this issue?

Kind regards,

David

Feature request

I am using the `AutoComplete` component to implement a search input and I want to be notified when the user selects an item (via mouse click or keyboard navigation) from the popup list.

I found an undocumented prop `handleItemSelect` on the `AutoCompleteHandle` ref object, and used it to implement my feature successfully.

Please can you expose `handleItemSelect` as an event on the `AutoCompleteProps` API.

The `Surface` component, in the drawing module, has a few exposed event handlers. It exposes click, mouse enter and mouse leave. It does not expose a handler for mouse scroll wheel movement.

You can see the exposed handlers in the `SurfaceOptions` type ...

SurfaceOptions - React Drawing Component | KendoReact API (telerik.com)

Can you please expose the mouse scroll event handler?

A horizontal scroller or scroll list?  A list of items or chips can be scrolled through horizontally, either by using arrow buttons or drag.

This is a common way of accessing a long list of items on a phone - by swiping left or right on the list with your finger.

There are a couple of horizontal scroller controls available for react - but they are not complete, buggy and not supported.

It doesn't possible to set different "no events" text for the Agenda component, can we add the ability to set it by prop like in the example below?

<Agend noEventMessage="No meetings" />

<Agend noEventMessage="No vacations" />

Hello, 

I am using Filter component from kendo-react-data-tools and I need to parse oData filter string in URL to initialize the filter component. Is there a way to convert oData string to filter data that Filter component can use ? I am using toODataString to convert filter to oDataString and I am looking for the opposite way。

Thanks,

Rita