Under Review
Last Updated: 26 Nov 2022 08:45 by ADMIN

https://stackblitz.com/edit/react-haejnu?file=app%2Fmain.tsx%3AL115

It is a common use case to provide Grid's dataItemKey property to make sure changes are properly reflected per documentation - https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey

However, when this accessor property is provided (usually a unique ID on all groups and items), Kendo uses it instead of its default auto-incremented `'ai' + absoluteIndex` key to index the <GridRow /> for each group's header and footer - giving them the same value and causing React to throw multiple warning about duplicate keys. This makes it unreliable to specify dataItemKey property when using the grouping feature with aggregate footers as it messes up with React's reconciliation mechanism.

Under Review
Last Updated: 28 Oct 2022 11:59 by ADMIN

Hi,

Please see the following example of the dropdownlist with bootstrap theme applied:

https://stackblitz.com/edit/react-ejxe44?file=index.html

I have updated the bootstrap cdn to latest. Notice that bootstrap styling is applied to the dropdowns including focus shadowing.

Now please see the exact same example but with theme customisation using a custom scss file:

https://stackblitz.com/edit/react-tuq49c-g6ofwn?file=index.scss

Notice that bootstrap styling is no longer applied to the dropdowns, which do not have focus shadowing.

Kind regards,

David

Under Review
Last Updated: 28 Oct 2022 05:16 by ADMIN

Hi,

Please see the following example of the Upload component being used to transfer a single file to a byte array:

https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx

Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.

Now please see the exact same example but switched to the new createRoot API:

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

Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.

I believe this is because of automatic batching in React 18.

Kind regards,

David

 

Under Review
Last Updated: 20 Oct 2022 08:35 by ADMIN

Hi Team, 

There is some unexpected behavior when resizing events after switching the Scheduler to 'Show Full Day'. Take a look at my sandbox, you'll notice, its barely anything, let alone anything fancy.

Replicate:
1. Create a new event that starts at 8am.
2. Switch the view to 'Show Full Day'
3. Using the start time resize handle and drag it up, to start earlier. And you will notice the dragItem actually drags down, and when you release the handle, the event appears in the correct place

This will only happen on the first resize when switching to 'Show full day'. You can replicate it more by switching back and forth between full day and business hours.

Similar Scenarios include:
1. Placing the event to end at 8am, switching to business hours and back, then drag the end time down, the dragItem will be positioned to start at 8am, but say its 7am and you will see the rest.
2. Placing the event to overlap 8am, will yield both problems.

Again this only happens on the first resize after switching views, and I've only tested it in DayView, so it might affect WeekView as well. There appears to be no issue when events overlap the endWorkTime.

Thanks,
Grant

Under Review
Last Updated: 12 Oct 2022 06:26 by ADMIN
Created by: Joca
Comments: 1
Type: Bug Report
0

There is an issue with ComboBox remote virtualization.  This is reproducible on https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-filtering-with-remote-data-and-virtualization

Scroll slowly till almost the end of the list. Pay attention to the name: Paula Parente

Notice that the name keeps repeating after scrolling as the scroll goes back and forth. You'll need to scroll a few times more before the scroll continues to load

other items.

 


Under Review
Last Updated: 30 Jul 2022 09:08 by ADMIN

We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.

Steps to Reproduce:

  • Create a DropDownButton with text property set to a React.Node - eg:
<DropDownButton text={<div>test text</div>}>
  • Inspect the DropDownButton aria-label value using the developer console

Expected Result:

aria-label contains the text inside the React.Node

aria-label="test text dropdownbutton"

Actual Result:

aria-label contains [object Object]

aria-label="[object Object] dropdownbutton"

 

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

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?


Under Review
Last Updated: 13 Jul 2021 06:00 by ADMIN

Actual Result:

While navigating in table, Narrator is not announcing as 'enter table' and it is also not announcing rows and column information. while navigating in table, With arrow keys or table navigation keys or tab key, Narrator is announcing as 'end of line/blank'.

With caps-arrow keys, Narrator is giving row and column information.

 

Expected 
While navigating in table, Narrator should announce as enter table and it should also give row and column information. And while navigating with arrow keys or table navigation keys or tab key, Narrator should not announce as 'end of line/blank' instead it should give row or column information


User Impact 
Visually impaired users who rely on screen reader will face difficulties to determining Row/Column information of a cell.
Under Review
Last Updated: 24 May 2021 08:48 by ADMIN
The CSS styling of the Stepper component breaks when there is only 1 step defined. It may sound weird to only have 1 step but the items prop is an array and therefor should support 1 single step. Currently when only 1 step is defined the stepper bar extends like it's going to a 2nd step but just stops. It'd be nice if visually that progress bar just didn't show up if there was no 2nd step.
Under Review
Last Updated: 06 Apr 2020 09:12 by ADMIN

Steps:

1. Create web component with shadow-root.

2. Attach all.css styles behide shadow root.

3. Add compoent with icon from WebComponentIcon font.

Result:

Icon are not displayed properly.


Under Review
Last Updated: 02 Apr 2020 10:26 by ADMIN
Created by: Vlado
Comments: 11
Type: Bug Report
0

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';



export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,
    }

    return (
        <Drawer {...drawerProps}>
            <DrawerContent>
                {props.children}
            </DrawerContent>
        </Drawer >
    );

};

export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {


    return (
        <React.Fragment>
            <Router>
                <SidebarDrawer>
                    <Switch>
                        <Route exact={true} path="/" component={Connecting} />

                    </Switch>
                </SidebarDrawer>
            </Router>
        </React.Fragment>
            )
}

export default hot(module)(App);