DatePicker is slow when it is next to a Grid with lots rows

[Jie]

Hi,

Please see this example https://codesandbox.io/s/thirsty-bohr-2s8dmm?file=/app/main.jsx. There is a very simple DatePicker and a very simple Grid in the page. The Grid has 1000 rows. When clicking the DatePicker button, it take 1 - 2 seconds to show the calendar dropdown, which  significantly slower then normal.

 

Thanks,

Jie

[Filip]

Hello, Jie,

Thank you for the provided example.

It seems that the DatePicker is opening slower due to the large dataset of the Grid.

Enabling column virtualization seems to resolve the issue, here is the updated example:

https://codesandbox.io/s/happy-tom-zgcvfx?file=/app/main.jsx

More information on column virtualization can be found here:

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-virtualization/

Regards,
Filip
Progress Telerik

[Jie]

But why would grid's performance affect date picker's performance? In React profiler, I saw only date picker was rendered.

This seems only happens to date picker, if it is a DropdownBox instead of date picker, the DropdownBox's performance is not affected by grid.

[Filip]

Hi, Jie,

The behavior is rather strange and we will need to research it further as the Grid should not affect the DatePicker, I have logged it in our GitHub as an issue where it can be tracked and monitored:

https://github.com/telerik/kendo-react/issues/1638

Once we have made any progress on it, the item will be updated accordingly.

Regards,

Filip

[Jie]

Thank you!