MultiSelect value binding should not require text

[madani2010]

I am basing my suggestion on sample located here: https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding/#toc-datasets-of-objects I am wrapping my multiselect inside a high order component which takes care of the data binding.When I am doing the value binding (which is usually done in the multiselect parent component e.g. form page), i Find it unnecessary to have to provide text in addition to value since I get the value as a foreign key but do not want to hit the database just to fetch the text (e.g. do not want to do Entity Framework include join).

So instead of passing both text and id to the state as below:

state = { value: [ { text: 'Football', id: 2 }, { text: 'Tennis', id: 3 } ] };

I feel it should be enough to pass only the id:

state = { value: [ { id: 2 }, { id: 3 } ] };

Thanks

[Xizario]

Maybe I am missing some part of the request, so here is my question: What should be shown to the end user of the page, when the multiselect does not have the text for the items?

[madani2010]

I am assuming that the value property value is a subset of the data property value.My solution assumes the existence of the text and value in the data property.What is left is just filtering the data array by the passed array of ids, and then set the value to the filtered array.Something like:

`state = { data: [ { text: 'Football', id: 2 }, { text: 'Tennis', id: 3 } ],value: [ { id: 2 }] };

const filter = state.data.filter(sport =>state.value.includes(sport));`

Then show each data element UI in the multiselect.

[nstoychev]

The problem with this approach is when the component is used with virtual scrolling. The user selects some items, then scrolls somewhere and the component data changes. Handling cases like this one will increase the component complexity, will make it difficult to maintain and most likely some bugs will be introduced.

The solution that I suggest is to implement a HOC which adds this functionality similar to this one - (https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/common-scenarios/#toc-using-data-fields-for-values) or just get the component value from the data before passing it to the MultiSelect.

let data = [
    { text: 'Basketball', id: 1 },
    { text: 'Football', id: 2 },
    { text: 'Tennis', id: 3 }
];
let value = [{id: 2}, {id: 3}];

MultiSelect value => data.filter(item => value.find(i => i.id === item.id));

[madani2010]

Thanks for the HOC workaround.The linked sample solved this issue and another issue of bubbling events from kendo comp to HOC comp to parent comp.