Performance issue with tons of items

[Frederic]

Hi, we have some multiselect with tons of data (about 5000+).

 

That makes the "dom" very charged and the ui slow.

We found a part of the solution, in that dojo:

https://dojo.telerik.com/@foxontherock/oDerIDAg/3

DOM is very light as we only display first 50 items, and if the user "search" for the items, it finds it on any page. The value is correctly set.

But, when I load the item with values, they are not set if they are not on page 1.  

But, the solution is near, as they are correctly set when we select it from a search...

Do you need to fix something, or is there an easy solution I can do to make the items correctly set initially?

Thank you.

[Frederic]

One step closer to the solution, but not satisfied... using "sort"

https://dojo.telerik.com/@foxontherock/ujilamoW

But I prefer the first iteration, without "sort"... any clean solution?

[Petar]

Hi Frederic,

The reported behavior is expected for the MultiSelect. The reason why the item "150" is not being selected inside the component is that when the popup is opened, the "150" record cannot be found inside it. If you open the first Dojo you've sent me, you will see that the "1" and "15" records are highlighted in the popup list. If the "150" is added to the "selected" items but not in the popup, this will confuse the end-users. 

If the functionality of your application requires to set default values for the MultiSelect on its initialization and you don't want to load all items, here are the possible approaches you can try. 

• Use MultiSelect with virtualization - Here is a Dojo that represents an edited version of the example from the previous link. You can see that the default values passed to the MultiSelect are - 10265, 10289, and 10420. To select the last value(10420), the component makes multiple requests to the DataSource, till the page that has the '10420' record is available. Thus in the MultiSelect, we load only the DataSource pages which records we currently need. More about the virtualization can be found on this link: https://docs.telerik.com/kendo-ui/controls/editors/multiselect/virtualization. 
• Use the approach that you've shared in your last reply
• Use an approach to add te default values in the first page of the DataSource - check this Dojo for more details. 

I hope the provided options will help you choose which one best fits the requirements of the targeted business logic.

Regards,
Petar
Progress Telerik

[Frederic]

Thank you for your reply, I forgot to mention that I do not want to use virtualisation, we tried it several times previously and we always have troubles with it, it continually crashes and it's totally unstable in real life scenarios, specially with Firefox.  Maybe I can give another chance to it, that was 2 years ago... 

So, I'll continue using the "filter" or "sort" properties of datasource, and make sure my selected items are present in the first page!

If I find a better solution, I'll post it here! 

 

[Petar]

Hi Frederic,

Yes, you can give virtualization a try. In general, there are no known issues with it. Neither there is something specific in Firefox. If you need assistance with the virtualization's implementation, you can submit a support ticket about it. 

If you find a better solution that implements your functionality, it will be useful for the community and it will be nice of you if you share it.

Regards,
Petar
Progress Telerik