A little thing, but users remember position of UI elements more than anything else. The filter buttons on the grid by default are not in the same place though for all filter types.

It would be preferable if the filter buttons were all on the same side, regardless of the filter type (e.g., some types put it on the left, while others put it on the right). Pictures below for context.

Having the endTime set to the next day (in regards to the startTime) for example, should allow the Day view to show the entire period.

The same functionality is available in Kendo UI for jQuery Scheduler:

• https://dojo.telerik.com/ibuqUXoz/3

Currently, the Scheduler accepts only "HH:MM" format as string values.

I've already log an issue on Github -> https://github.com/telerik/kendo-react/issues/1303

Submitting here as it is an important regression with React 18 and ReactDom.createRoot breaking Time picker.

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();
    });
});

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

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

Currently, you cannot specify a custom icon for `MenuItem`, e.g. a Material Design icon, as the `icon` prop only accepts the name of an icon from the Kendo font icons.

So please can you add a `iconClass` prop just like Button so we are able to use an alternative icon set.

Thanks.

All of the Kendo components that "hide" content (tab views, collapse panels, etc) don't actually hide any content. They require us to not render any children.

<ExpansionPanel
  {expanded === item.id && (
    <ExpansionPanelContent>

This just strikes me as an odd design decision. I guess I don't understand the point of these components if they don't do the 1 thing they are supposed to do; hide portions of the content.

Un-rendering the content is usually not desirable. The contents are often still important. Possibly for SEO purposes, A11y, or if they are part of a Form:

<Form
  render={() => {
    <FormElement>
      <ExpansionPanel>
        {expanded === item.id && (
          <ExpansionPanelContent>
            <Field
                name={"firstName"}
                component={Input}
                validator={() => 'always invalid'}
              />
          </ExpansionPanelContent>
      </ExpansionPanel>
    </FormElement>
  }}
/>

This makes the Form valid as long as the panel is collapsed.

Can check out how Bootstrap collapse panels work to see how most people would expect these components to behave. The contents is rendered into the DOM and JS and CSS are used to hide it. There should be a way to achieve this same behavior with Kendo.

As a workaround I end up having to do my own CSS/SASS to hide the contents

.k-expander {
  .k-expander-content-wrapper {
    height: 0;
    overflow: hidden;
  }

  &.k-expanded {
    .k-expander-content-wrapper {
      height: auto;
    }  
  }
}

Hi,

Unfortunately,  the KendoReact PivotGrid sorting is currently supported only for string values. This means that even if you set the field type to "date", the sorting will still be applied as if the field were a string. You can see that in this example: https://dojo.telerik.com/oZoTuMIC/55

Please extend your sorting mechanism so that the sorting covers types such as dates and numbers too. Please also consider the user's language when implementing this sorting. We receive date fields in the format yyyy-mm-dd and they should then be displayed in the user language in the UI. For example in German dd.mm.yyyy (i.e. 21.11.2021) or in English 11/21/2021. And please offer this feature for local data binding too.

Regards,

Oliver

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.

Hello, 

I'm trying to implement an accessible table using your Grid React component. The idea is for the users to be able to navigate the table using the keyboard if need be. Because we are a government contractor we have to make our product accessible and, testable using the Government issued tool for testing, ANDI. 

When I use a normal table, I can implement scopes in the table header, either for the column or the row and thus create relationships between headers and cells as well as, use the keyboard to navigate the entire table.

When the same table is implemented with the Grid component, there are no scopes in the header then again, both header and body are separate even though they reside inside a div with role=grid on it which in turn, contains two divs, one for the header and one for the body each in turn, implementing a table: one for what would be the headers and one for what would be the body. I'm attaching screenshots even though I'm sure you know the product.

The fact that both the <thead> and the <tbody> reside in different places, even though they are within the grid, makes it impossible to add associations furthermore, we're using a data-table and the grid. I tried using different props but, as long as both the header and the body are separate, the ANDI tools can't find the table.

Question is, is there a way to make this table truly accessible just as a one created using the semantic table tags?

I have need for a Captcha component for a public-facing form. Most of the Telerik products include a captcha component, but not KendoReact.

Can we expect this to be added at some point?

Hello,

I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.

1. Checkboxes:

• https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-moavl9?file=app%2Fmain.jsx

2. Filterable

• https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/#toc-basic-configuration

Thanks