Hello team,

We work on a product that features a large set of input components that are based on the Kendo inputs and dropdowns. We have custom designs that require us to customize the Popups of comboboxes, multi-selects, color pickers, etc with specific layout and styling, open/close animations, blur handling and keyboard interactions (e.g. closing on Esc). This is done fairly easy with the Date Input components (DatePicker, DateTimePicker, DateRangePicker, TimePicker) as they expose such property:

popup?: React.ComponentType<PopupProps>;

However most other controls that use a Popup internally expose just PopupSettings that is not enough for us even with the "appendTo" option.

We would be happy to see a similar ability (as in Date Inputs) to inject the Popup component in:

• Components in the "@progress/kendo-react-dropdowns" package.
  Most of them simply reuse the same ListContainer component that renders the Popup.
• ColorPicker in the "@progress/kendo-react-inputs" package.

I guess that customizing the popup in the DropDownButton, FloatingActionButton and SplitButton would also be nice to have but for those CSS styling does good enough job for us.

Regards

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

This feature request follows on from my Forum post (https://www.telerik.com/forums/scheduler-support-to-multiple-slot-selection). 

It would be great if we had more control over slot selection, like:
 - Turn off selection;
 - Select multiple slots;
 - Being able to Access the selected slots to use as start and end date/time in EditSlot.

Kind Regards,
Grant

Hi Team,

For MenuItem target="_blank" feature is not there. Please enable the same. which will be helpful as menu is the face of app.

Regards,

Revanth

Dear Telerik Support Team,

Our development team relies on Telerik Kendo DevCraft Ultimate, specifically the Kendo React components, for our projects. We have a suggestion that would greatly improve our developer experience.

When using MUI components, we appreciated the seamless integration with VSCode. Hovering over an MUI component name would display a tooltip with a brief description and a clickable link to the MUI API documentation. This feature allowed us to quickly access examples and API details.

MUI with VSCode

Unfortunately, this feature is absent in Kendo React. We lack a tooltip popup with a direct link to the online Kendo React API documentation. Consequently, it has become challenging for our developers to find examples and access component documentation without manual searches.

KendoReact with VSCode

We kindly request an enhanced API integration in Kendo React. Adding a tooltip popup with a brief description and clickable link to the online Kendo React API documentation would greatly streamline our workflow, saving us time and improving productivity.

I have grid with 1000 items. On every small change to my models, like selection or expand, I am getting every table cells being re-mounted, instead of re-rendered (imagine how many of them is currently with 1000 rows). I have tried to use shouldComponentUpdate to optimize my rendering, but grid component just removes old cell and mounts new one, instead of rerender.

Hi, is there a way i can customize the paging options style? The default is we have the page selection on the left, number of Items per page selection in the middle and the total records info on the right. I would like to just reverse it. I tried a display flex on the container and a flex-direction: reverse but it reverses the paging icons also. Please advise.

I would like to request the data-query package support filtering on OData collections using lamdba functions. Given a Collection with the existing operators, the filter string outputted by `toODataString` should be OData v4 compliant.

Example: Project is a collection. A user filters to see all General projects which outputs { field: 'Project', operator: 'eq', value: 'General' }.

Recommendation: Supply another key that dictates the lamdba operator and property field to use.

{ field: 'Project', operator: 'eq', value: 'General', lambda: 'any', collectionField: 'Name' } -> $filter=Project/any(x:x/Name eq 'General')

The above can work with inner functions like contains.

{ { field: 'Project', operator: 'contains', value: 'gen', ignoreCase: true, lambda: 'any', collectionField: 'Name' } -> $filter=Project/any(x:contains(tolower(x/Name),'gen'))

Hi 

Please build a React component for TreeMap similar to https://demos.telerik.com/aspnet-ajax/treemap/overview/defaultcs.aspx

Add virtualization to the TreeView component to handle large trees. 

Each node should be possible to have open at all time.

Each node should have the possibility to be selectable with a checkbox.

We currently use grouping in the Kendo Grid, however the groups are always sorted alphabetically by the name of the group.

In our case, we want the groups to be sorted another way: an order value that corresponds to the group name.

To do this, it would be good if we could specify a comparison function, and have it take a object we provide (a map between the group name and order value).

We currently work around this by prepending a character to the group name to have it sort correctly (see screenshot). As you can see, it's not very appealing.

We are using @progress/kendo-react-grid@4.6.0

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

Hi,

I am using the date range picker component and it works fine.

But I want to add time select feature to date range picker.

I did not see this feature when I examined the document.

Link : https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/

Please your support

Best Regards,

Can you give us support on how we can get the information about the selections, and keep it updated at all times? Thank you,

We'd liked to have a wrapped loader similar to other third party loaders.

The code should be something like this:

<Loader show={props.isLoading} message={'loading'}>
  <SomeComponent />
</Loader>

Other solutions are also acceptable.  The requirement is that the loader is positioned above the main component without having it rerender or reposition.

Hi, 

Please check this example

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

We wanted to break the page once its started overlapping the footer.