use specific field as value in KEndoReact MultiSelect

1 Answer 254 Views
MultiSelect
Alex
Top achievements
Rank 1
Iron
Iron
Alex asked on 15 Dec 2021, 11:37 AM

Hello,

I'm trying to convert a old application that is now using kendo react wrappers to pure KendoReact.

The issue I'm facing is that the selected values in my model are not objects, but are an array of primitive values.

Is there a way to specify a field to be used as value like it was with valuePrimitive in the old Kendo UI ?

My MultiSelect is declared as following:

<MultiSelect
	ref={listRef}
	data={dataSourceItems}
	dataItemKey={props.dataValueField}
	disabled={!props.enable}
	textField={props.dataTextField}
	value={uiContext.maStore[props.entityName] && uiContext.maStore[props.entityName][props.fieldName] && tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())}
	onChange={changeHandler}
	filter={props.filter}
/>

where maStore is a mobx-state-tree store, and dataSourceItems is a array of objects like:

[
{id: 100, code: "cod1", description: "description 1"},
...
]

and 

tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())

is an array of numbers

Thank you.

Kind regards

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Dec 2021, 01:17 PM

Hello,

Thank you for the details.

This can be done by finding the correct item from the dataSourceItems based on the id from `tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())`:

https://stackblitz.com/edit/react-ffrmhw?file=app/main.jsx

The KendoReact works with the full object all of the time. We can find the correct value based on the id and then we can find only the id from the full object.

Regards,
Stefan
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/.

Alex
Top achievements
Rank 1
Iron
Iron
commented on 16 Dec 2021, 10:29 AM

Thank you, it works.
Tags
MultiSelect
Asked by
Alex
Top achievements
Rank 1
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or