Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Won't Fix
Last Updated: 22 Jun 2022 21:08 by ADMIN
Tom
Created on: 03 Jun 2022 07:40
Category: KendoReact
Type: Bug Report
1
kendo-react-listbox - slow when using the item attribute

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. 

6 comments
Tom
Posted on: 20 Jun 2022 07:35

This works perfectly.

Thank you for your help. I did read the documentation example wrong.

ADMIN
Konstantin Dikov
Posted on: 20 Jun 2022 04:37

Hi Tom,

I have looked at the example and I have noticed that your custom item is defined within the main component, which is what I have guessed in my previous reply. This forces React to re-mount the ListBox on every action, including selecting an item. This is also why the drag and drop does not work. Moving the custom item definition outside of the main component resolves both of the issues:

Please give this a try and let me know if everything works correctly on your side too.

 

Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tom
Posted on: 16 Jun 2022 21:36

https://stackblitz.com/edit/react-1nf4qb-h4rrt2?file=app/main.tsx

Tom
Posted on: 16 Jun 2022 21:35

I cannot find what I'm doing wrong. 

I forked your stackblitz and made it like mine: https://react-1nf4qb-h4rrt2.stackblitz.io

 

Tom
Posted on: 13 Jun 2022 07:23

Thank you for your reply.

I will investigate why I'm having this issue and will report back with my findings.

ADMIN
Konstantin Dikov
Posted on: 09 Jun 2022 17:34

Hello Tom,

Thank you for reaching out to us.

I have tested the example in stackblitz, but I was not able to replicate the issue in question. I have also added additional 200 items:

One thing that I could suggest is that you ensure that you are not defining the custom item inline and that it is defined as separate component outside of the main component (as in the example). 

If the issue persists, please elaborate which version of the components you are using and share the exact code that you have for the ListBox.

Looking forward to your reply.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category