Hello,
I'm trying to get client side virtual scrolling working in a multiselect with kendo-dropdowns-react-wrapper.
I have a multiselect containing a list of items (people) belonging to a group. The datasource is changing dynamically, according to the group selection in another dropdown list.
The same person may belong to different groups, but the groups may contain different people.
When I change the group selection, if a person is selected which belongs to both groups, I'd like the related multiselect item to remain selected.
This expected behavoiur works well with virtualization disabled, but when I enable virtualization I experience a strange behaviour.
Despite I have implemented the valueMapper function (that is called correctly and returns the correct new index list), when changing the datasource, the selected indices are not updated and the new items corresponding to the old indices are selected.
What am I missing to get it work with virtualization?
Below are the stackblitz examples.
To reproduce the problem:
- initially select "Clare Kline" and "Hamilton Holland" (the names are imaginary and created with a random generator) from the multiselect (records 1 and 3)
- Switch from "group 1" to "group 2" in the dropdownlist
- Verify that the multiselect selection has changed to "Hamilton Holland" only (who is the only person in common between the two groups): this works in non-virtualized version, while in the virtualized version "test2" and "test3" are selected.
- Select "group 1" again in the dropdownlist
- Verify that "Clare Kline" and "Hamilton Holland" are selected again
Without virtual scrolling: https://stackblitz.com/edit/react-ts-fnfdar?file=index.tsx
With virtual scrolling; https://stackblitz.com/edit/react-ts-qb16wa?file=index.tsx
1 Answer, 1 is accepted
Hello, Alex,
We recommend using the KendoReact MultiSelect for React applications. The component is made specifically for React and with dynamic React state updates in mind.
The `@progress/kendo-dropdowns-react-wrapper` package is officially deprecated and will not receive future updates/fixes:
https://www.npmjs.com/package/@progress/kendo-dropdowns-react-wrapper
Also, testing the example I noticed that the valueMapper is not called.
Regards,
Stefan
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.
Rank 1
Iron
Iron
Hello, thank you for your reply.
The issue is part of a very large project which cannot be easily upgraded to KendoReact.
Here is a screenshot of the debugger showing that the valuemapper is being called when the datasource changes
Hello,
Indeed it was called, I assume there was an issue in StackBlitz when I was testing.
After more tests, I can confirm that the current result is expected as the valueMapper works with an index by default. This means that when the dataSource is changed, it sets the value based on the index, the other item is not that index.
For example, in dataSource 1 we have item X at index 0. Then on dataSource 2, we have the same item X at index 10. What the current setup will do is to set the value on index 0.
The valueMapper can work with dataItem as well. I can suggest inspecting that approach to see if it will better fit the requirement:
https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/virtual#virtualmapvalueto