Combobox Binding to Dataset of Object

[Anthony]

 

Based on the Dataset of Objects example in https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding/, I understand that the combobox value will be the selected object. 
For example, if I selected "Football", the value is 
 {"text":"Football","id":2}



On the submit, is there a way for the values collection to have the "id" value and not the selected object?  

Presuming my combobox name is 'sport', I have to use values.sport?.id  

That's not horrible, but the part I don't like is initializing the component with a previously selected value.


Is there a way to pass the value of id as a separate prop and have the component find the matching object in the {data} object.


The way I got it to work to  have a function that takes the id as an input parameter filter for the matching item.  This is passed as the {value} prop.  

 

Thanks

Anthony

[Krissy]

Hi Anthony,

I've created an example that shows how this case can be achieved.
The main ideas here are that we either get the id from the whole object if we need it, or we find the whole object through the id.

 I've also used the ID as an initial value to show that the component finds the matching object and displays its 'text' property in the input field and dropdown. 

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

Hope this example is helpful.

Regards,
Krissy
Progress Telerik

[Anthony]

Thanks Krissy,

This was exactally what I needed and simplified  my code.

I want to make sure I understand what's happ     

[Anthony]

Hi Krissy,

I relaized my response go truncated.  What is the reasoning behind using the useCallback hook in your example?

[Krissy]

Hello Anthony, 

The useCallback hook will return a memoized version of the callback that only changes if its dependency changes, in this case - the onChange function. It is used for optimization and prevention of a function to be re-recreated. In this case, the useCallback will prevent the onChange function to be re-built on every render cycle and will allow it to be re-built only if the value of the input changes.

Hope this is helpful.

Regards,
Krissy
Progress Telerik

[Anthony]

Hi Krissy,

Is there any reason why that onChange handler cannot be implemented in the FormCombobox function?  I want this behavior for the majority of comboboxes in my application.

See my fork of your sample. https://stackblitz.com/edit/react-combobox-id-cg1lur?file=app/form-components.jsx

Anthony

[Krissy]

Hello Anthony, 

Yes, there is no need for this to be in a separate component. I have updated the example with the logic implemented in the FormComboBox which will apply to all of its instances.

https://stackblitz.com/edit/react-combobox-id-bnhi73?file=app%2Fform-components.jsx 

Thank you for noticing this and hope this is helpful.

Regards,
Krissy
Progress Telerik