The React Dropdown and Multiselect components are difficult to use in a <Form> because they return an object instead of the value that would be part of a form.

Maybe there is already a way to handle it, but the docs for the MultiSelect do not include any way to map the value Object to just the primitive, and the Form docs have no example with a MultiSelect.

In my experience, when loading and saving data to/from an API, they very rarely take objects with an ID and Text properties. They usually expect just the primitive values (IDs) of the selected items. The Angular MultiSelect control has a `valuePrimitive` attribute that can be used to control this behavior. The React version does not seem to support this use case at all, or it is hard to find in the docs if it does exist.

Example code: https://stackblitz.com/edit/react-xroafa?file=app/main.jsx

Essentially, it would have been nice if you could do:

<MultiSelect
  data={[
    { id: 1, text: 'One' },
    { id: 2, text: 'Two' },
  ]}
  value={[2]} // just a primitive value, not an object
  onChange={(value) => /* value should just be the `id`s not the objects */ }
/>

Which would enable MultiSelect to be usable in a <Form>. Since the <Field> component does not allow overriding the `value` or `onChange` events, mapping these primitives to object form is frustrating and a bunch of extra code.

In the Angular version this is easily achievable, with an example in the docs: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#toc-primitive-values-from-object-fields

Hi Team,

I am facing one challenge to create a Calendar view with multiple date selection with multiple colors.

Please suggest and share class component references to achieve the same.

Please refer attached video or do let me know if you have any questions.

Thanks.

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

Hello Support Team,

We are migrating our ASP MVC application to React JS and need your help in scheduler time-line view. In ASP MVC you provided the functionality to render the custom template for Resource Title or we can say for the user name. But we are unable to implement the same functionality in react js, and this is the important module of our application. Our application client strictly say he needs 100% same application as it is in ASP MVC version.

We request you to please add this feature to the Scheduler in the coming updates & this would be useful to the other users also.

Thank You.

In our unit tests, we sometimes want to be able to use the ByTestId methods of the React Testing Library to find bits of DOM created by a Kendo component.  However, setting a data-testid attribute (or really any data- attribute) on a Kendo component does not always result in the attribute appearing anywhere in the final DOM.

To demonstrate, below is a test suite (also included in the zip) where I tried putting a data-testid attribute on the Kendo components Input, TextArea, Checkbox, Slider, SliderLabel, MultiSelect, and DatePicker, then checked if the attribute appeared in the rendered DOM.  The tests for Input, TextArea, and Checkbox are successful.  The ones for Slider, SliderLabel, MultiSelect, and DatePicker are not.

import { render, screen } from '@testing-library/react';
import { Input, TextArea, Checkbox, Slider, SliderLabel } from '@progress/kendo-react-inputs';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';

// SUCCEEDS
describe('Kendo Input', () => {
    it('supports data attributes', () => {
        render(
            <Input data-testid="the-input" />
        );

        const input = screen.queryByTestId('the-input');
        expect(input).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo TextArea', () => {
    it('supports data attributes', () => {
        render(
            <TextArea data-testid="the-text-area" />
        );

        const textarea = screen.queryByTestId('the-text-area');
        expect(textarea).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo Checkbox', () => {
    it('supports data attributes', () => {
        render(
            <Checkbox label={"Chad"} data-testid="the-checkbox" />
        );

        const checkbox = screen.queryByTestId('the-checkbox');
        expect(checkbox).toBeTruthy();
    });
});

// FAILS
describe('Kendo Slider & SliderLabel', () => {
    it('supports data attributes', () => {
        render(
            <Slider min={1} max={2} data-testid="slider-root">
                <SliderLabel position={1} data-testid="slider-label-1">One Fish</SliderLabel>
                <SliderLabel position={2} data-testid="slider-label-2">Two Fish</SliderLabel>
            </Slider>
        );

        const sliderRoot = screen.queryByTestId('slider-root');
        const sliderLabel1 = screen.queryByTestId('slider-label-1');
        const sliderLabel2 = screen.queryByTestId('slider-label-2');

        // test them all at once so we can know the full scope of our failure/success
        expect({
            sliderRoot,
            sliderLabel1,
            sliderLabel2
        }).toMatchObject({
            sliderRoot:   expect.anything(), // don't be null or undefined
            sliderLabel1: expect.anything(), // don't be null or undefined
            sliderLabel2: expect.anything()  // don't be null or undefined
        });
    });
});

// FAILS
describe('Kendo MultiSelect', () => {
    it('supports data attributes', () => {
        render(
            <MultiSelect data-testid="the-multi-select" />
        );

        const multiselect = screen.queryByTestId('the-multi-select');
        expect(multiselect).toBeTruthy();
    });
});

// FAILS
describe('Kendo DatePicker', () => {
    it('supports data attributes', () => {
        render(
            <DatePicker data-testid="the-date-picker" />
        );

        const datepicker = screen.queryByTestId('the-date-picker');
        expect(datepicker).toBeTruthy();
    });
});

Hello

I'm using the menu component version 4.13

I'd like to change the style of the active menu item but could not find any examples. Here's one of my menu items

i'm following your example to do the routing

I'm using react router dom.

Do you have an example for how to change the css of the active menu item?

Thank you.

Fabian

Hi there,

I can see there is a column chooser component for the Angular Data Grid e.g. https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-column-chooser-item but there is not an equivalent for the React Data Grid (unless you code it yourself).

The DevExpress React Grid does have this feature https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-visibility/ so we were wondering if such a thing is planned React Data Grid?

Thanks very much,

James

On this page: https://www.telerik.com/kendo-react-ui/getting-started/

There's a syntax mismatch in end-of-line semicolons.

This line ends with a semicolon:

```js
import '@progress/kendo-theme-default/dist/all.css';
```

This line does not end with a semicolon:

```js
import { Calendar } from '@progress/kendo-react-dateinputs'
```

All teams that I know of consider it to be an error to do both ways in the same file.

The solution is to pick one way then be consistent. The broader solution is to use a linter, such as ESLint, that can process the code to ensure you're using your expected syntax and formatting.

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.

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?

React v18 has been released.

It appears that KendoReact only supports up to v17 (dependency conflicts if you try to use v18).

Can you please add support for React v18?

Thanks!

A TimePicker control will take all scroll events if the mouse cursor is over it, whether the element has focus or not, and prevent the scroll from bubbling up to the page. This prevents a page from scrolling as soon as the mouse cursor touches a TimePicker.

Using Kendo rect v5.1.0 in FireFox v98 on OSX. (Issue does not happen in Chrome)

You can view the problem in the demo page: https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/
Just try to scroll down the view, and as soon as the TimePicker is under the mouse cursor, the page can no longer be scrolled until you move the cursor off the control.

Set up a TimePicker with a `min` and `max`. For example

            min={new Date(0, 0, 0, 0, 0)}
            max={new Date(0, 0, 0, 5, 0)}

Click on the text input to focus the 'hours' portion.

Roll the mouse scrollwheel up/down to change the hours.

You can 'scroll' past 5:00 and set the time to anything above the max.

You can also use the keyboard to enter any number outside the min/max.

Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?

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?

I use a Datepicker with 'he' loclae. It works fine, but the week's days are displayed from left to right instead of right to left as expected.
I tried to add className = 'k-rtl' but it did not help.
Is there a way to change that?

Here is a demonstration of the problem:

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

There is an inconsistency with the DateRange picker in the way element focus is set when closing the date selection popup by mouse vs keyboard. When using the mouse to close the date range selection popup, element focus becomes lost/reset.

You can simulate this from the example page https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/

Steps to simulate good behavior (this works correctly):

* click the 'from' input text element (causes the popup to open and the text input to have focus)
* press 'escape' to close the popup (the popup is closed, and the 'from' input element retains focus)
* press 'tab' (focus moves to the 'to' text input element)

Steps to simulate behavior that could be improved:

* click or tab into the 'from' input element (causes the popup to open and the text input to have focus)
* click (with the mouse) outside the popup to close it (the popup is closed, and focus appears to be lost.)
* press 'tab' (focus moves to the 'from' input element again because we are back at the beginning of the tab order list)

This input can lead you into a tab order loop if you mix pressing 'tab' to advance focus, and using the mouse to click to close the date selection popup.
Feature request: when clicking to close the popup, element focus should be retained in the 'from' or 'to' text input; whichever had focus before the popup close, the same as pressing 'escape' to close the popup.