Won't Fix
Last Updated: 22 Jun 2022 21:08 by ADMIN

When the listbox has many items (roughly 200 and growing) the item attribute makes the listbox act slow when you want to click the item.
Even if the item render only returns the same value as not setting the item attribute. It seems like all the items re-render when it gets clicked?

Also in this example https://www.telerik.com/kendo-react-ui/components/listbox/customization/ it is possible to drag and drop a custom item.
But this is not working when we copy exactly the same code from the example. The drag event gets triggered but nothing happens. 
Both lists have items to avoid this bug: https://github.com/telerik/kendo-react/issues/1300

I can post my source code but it is literally the same as the example. When we remove the item attribute the drag and drop works again. 

Pending Review
Last Updated: 21 Jun 2022 15:00 by Daniel
Created by: Daniel
Comments: 0
Type: Bug Report
2
Current Behaviour

When an item, which has submenu, from the menu dropdown is hovered the submenu appears. But if you click on the hovered item the submenu disappears.

Expected Behaviour

When an item, which has submenu, from the menu dropdown is hovered and then clicked the submenu should stay visible.

MInimal Reproduction

I'm providing a reproduction from Kendo React code examples.

https://stackblitz.com/edit/react-jqhjyv?file=index.js

Unplanned
Last Updated: 10 Jun 2022 11:53 by ADMIN

Hello,

After updating the kendo version in my project to "^5.1.0" I've noticed that some errors are appearing in our console when we are trying to resize items in the Scheduler. 

"use-resize-item.js:53 Unable to preventDefault inside passive event listener invocation."

I have attached a video with the error.

Thanks!

Unplanned
Last Updated: 10 Jun 2022 08:39 by ADMIN
Scheduled for 5.4.0
Created by: Simonas
Comments: 1
Type: Bug Report
0
Setting react grid prop "scrollable" value to "none" and dragging column header causes a crash. https://stackblitz.com/edit/react-vpw68o?file=app/main.jsx
Under Review
Last Updated: 03 Jun 2022 07:23 by Tom

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.

 

 

Under Review
Last Updated: 25 May 2022 05:09 by ADMIN
Planned
Last Updated: 24 May 2022 14:15 by ADMIN
I've already submitted this to the GitHub issues - https://github.com/telerik/kendo-react/issues/1297

Submitting here as it is an important regression with React 18 breaking all popup animations.
Under Review
Last Updated: 20 May 2022 08:33 by ADMIN

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();
    });
});
While it is theoretically possible the problem is limited to just Slider, SliderLabel, MultiSelect, and DatePicker, I highly doubt it.
Won't Fix
Last Updated: 12 May 2022 11:58 by ADMIN
Created by: Joel Parker Henderson
Comments: 12
Type: Bug Report
0
On this page: https://www.telerik.com/kendo-react-ui/getting-started/

The yarn example says...

```sh
yarn create react-app my-app
```

... which is old syntax and should not be used because of bugs.

Solution: update that line to use yarn download-and-execute (dlx) like this:

```sh
yarn dlx create-react-app my-app
```

Won't Fix
Last Updated: 10 May 2022 14:27 by Jeff

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?

Need More Info
Last Updated: 27 Apr 2022 08:30 by ADMIN
Created by: Joel Parker Henderson
Comments: 3
Type: Bug Report
0
## Missing kendo-react-popup

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

On this section: "Add a KendoReact Data Grid"

When I launch the app as usual:

```sh
yarn start
```

Then the browser page includes this error:

```
Compiled with problems:

ERROR in ./.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/ColumnMenuFilterForm.js 19:0-55

Module not found: Error: @progress/kendo-react-data-tools tried to access @progress/kendo-react-buttons (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @progress/kendo-react-buttons
Required by: @progress/kendo-react-data-tools@virtual:79c9c696d5f1e6f4dd730946c0d2912611551a498926b146bcbdd9d142588c5f4c2333469b63e7a9a2bdd1f0f1313d0d70b72cc8dbcafcc20e21e6b9790f6068#npm:5.2.0 (via /Users/joel/git/joelparkerhenderson/demo/demo-react-kendo/.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/)
Ancestor breaking the chain: demo-react-kendo@workspace:.



```

The solution that works for me...

Add the package:

```sh
yarn add @progress/kendo-react-popup
````

Edit `src/App.js` and add this line:

```js
import '@progress/kendo-react-popup';
```

Planned
Last Updated: 25 Apr 2022 07:39 by ADMIN
Created by: Joel Parker Henderson
Comments: 1
Type: Bug Report
0

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.

 

Need More Info
Last Updated: 20 Apr 2022 12:23 by ADMIN
Created by: Joel Parker Henderson
Comments: 1
Type: Bug Report
0
## Missing kendo-react-buttons

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

On this section: "Add a KendoReact Data Grid"

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

On this section: "Add a KendoReact Data Grid"

When I launch the app as usual:

```sh
yarn start
```

Then the browser page includes this error:

```
Compiled with problems:

ERROR in ./.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/ColumnMenuFilterForm.js 19:0-55

Module not found: Error: @progress/kendo-react-data-tools tried to access @progress/kendo-react-buttons (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @progress/kendo-react-buttons
Required by: @progress/kendo-react-data-tools@virtual:79c9c696d5f1e6f4dd730946c0d2912611551a498926b146bcbdd9d142588c5f4c2333469b63e7a9a2bdd1f0f1313d0d70b72cc8dbcafcc20e21e6b9790f6068#npm:5.2.0 (via /Users/joel/git/joelparkerhenderson/demo/demo-react-kendo/.yarn/__virtual__/@progress-kendo-react-data-tools-virtual-df92d36fcf/0/cache/@progress-kendo-react-data-tools-npm-5.2.0-8d098f65a0-5d68752aaa.zip/node_modules/@progress/kendo-react-data-tools/dist/es/columnmenu/)
Ancestor breaking the chain: demo-react-kendo@workspace:.
```


The solution that works for me...

Add the package:

```sh
yarn add @progress/kendo-react-buttons
````

Edit `src/App.js` and add this line:

```js
import '@progress/kendo-react-buttons';
```

Under Review
Last Updated: 11 Apr 2022 07:32 by ADMIN

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.

In Development
Last Updated: 30 Mar 2022 15:42 by ADMIN

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?

Won't Fix
Last Updated: 24 Mar 2022 10:29 by ADMIN

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

Planned
Last Updated: 14 Mar 2022 14:19 by ADMIN

According to https://www.telerik.com/kendo-react-ui/components/installation/source-code/#toc-source-repository the repo should be updated nightly. However it does not seem to be.


~/Projects/kendo-react-private (master) git remote -v origin https://kendo.git.progress.com/kendo-react-private.git (fetch) origin https://kendo.git.progress.com/kendo-react-private.git (push) ~/Projects/kendo-react-private (master) git fetch --tags ~/Projects/kendo-react-private (master) git pull origin master From https://kendo.git.progress.com/kendo-react-private * branch master -> FETCH_HEAD Already up to date. ~/Projects/kendo-react-private (master) git tag | grep v5 v5.0.0 v5.0.0-dev.202201182040

 

~/Projects/kendo-react-private (master) git log
commit 4bf2535e414ba2f342ddbef8daac9ec052f04cc2 (HEAD -> master, tag: v5.0.0, origin/master, origin/HEAD)
Author: kendo-bot <kendouiteam@progress.com>
Date:   Tue Jan 18 22:41:34 2022 +0200

    chore(release): publish 5.0.0-dev.202201182040

v5.0.0 seems to be the latest tag. Could someone verify that the github repo is actually being updated?

Thanks for any help!

Unplanned
Last Updated: 23 Feb 2022 12:51 by ADMIN
Created by: shieldsjared
Comments: 1
Type: Bug Report
0

Looking at the JSDoc for for `toDataSourceRequestString` and `toDataSourceRequest`, they both appear to have JSDoc above them, showing the parameter as:

 * @param {DataRequestState} state - The state that will be serialized.

Should this actually have `@param {DataSourceRequestState}`?

Under Review
Last Updated: 21 Feb 2022 14:19 by ADMIN

Hello,

Our team has an issue with KendoReact Data Grid Control https://www.telerik.com/kendo-react-ui/components/grid/

Data disappears when the user groups the grid by any column and scrolls down to the end. 

When the user scrolls up a bit from the bottom of the grid data blinks.
TreeList control doesn't look to be a good alternative in our case, because we need a grid with group, filter and sort functionality. Grid should work with thousands of records. Customer requires virtual scroll (paging can’t be used).

This issue can be reproduced when the grid has groupable option enabled. 

Virtual scroll works as expected when groupable is set to false.

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

Can you please point us to the solution?

Under Review
Last Updated: 09 Feb 2022 13:45 by ADMIN

Hello,

Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).

The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.

From UI standpoint: 

  • initially all tree nodes are collapsed

  • user clicks on i.e. 3rd tree node

  • selection is not displayed on any tree node (3rd node expected to be selected)

  • user expands 1st tree node - selection is set on the 3rd tree node

The following warning appears in the browser console. 

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.

    in TreeList (created by wrappedComponent)

    in wrappedComponent (created by wrappedComponent)

    in div (created by wrappedComponent)

    in div (created by wrappedComponent)

    in wrappedComponent

Model is defined as:

const TreeViewModel = types

    .model('TreeViewModel', {

        selectedItemUUID: types.maybe(types.string),

        tree: types.optional(types.array(TreeNodeModel), []),

        isLoaded: types.maybe(types.optional(types.boolean, false)),

        treeTypes: types.optional(types.array(TreeNodeTypeModel), []),

    })

    .views((self) => ({

        get treeCollection(): any {      

            return self.tree;

        },

    }))

Component is defined as:

        return (<>

            {!viewModel.isLoaded && loadingPanel}

            <div className='treeListContainer' ref={stageCanvasRef}>

                {treeListContainerHeight && <TreeList

                    style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}

                    data={viewModel.treeCollection}

                    expandField={expandField}

                    subItemsField={subItemsField}

                    columns={columns}

                    selectedField={selectedField}

                    rowHeight={40}

                    scrollable="virtual"

                />}

            </div>

        </>);

The following workaround allows converting an observable array to a regular array.

    .views((self) => ({

        get treeCollection(): any {      

            return JSON.parse(JSON.stringify(self.tree));    // or self.tree.slice()

        },

    }))

This solution affects performance due to array copy. 

Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.

Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.

Can you please extend KendoReact controls to support observable arrays?

Is there a better solution?


1 2 3 4 5 6