This is a migrated thread and some comments may be shown as answers.

Combobox Binding to Dataset of Object

6 Answers 781 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Veteran
Anthony asked on 04 Mar 2021, 09:44 PM

 

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

6 Answers, 1 is accepted

Sort by
0
Accepted
Krissy
Telerik team
answered on 05 Mar 2021, 05:41 PM

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

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/.

0
Anthony
Top achievements
Rank 1
Veteran
answered on 05 Mar 2021, 08:35 PM

Thanks Krissy,

This was exactally what I needed and simplified  my code.

I want to make sure I understand what's happ     

0
Anthony
Top achievements
Rank 1
Veteran
answered on 06 Mar 2021, 05:22 PM

Hi Krissy,

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

0
Accepted
Krissy
Telerik team
answered on 09 Mar 2021, 08:52 AM

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

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/.

0
Anthony
Top achievements
Rank 1
Veteran
answered on 10 Mar 2021, 01:31 AM

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

0
Accepted
Krissy
Telerik team
answered on 10 Mar 2021, 09:53 AM

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

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/.

Tags
General Discussions
Asked by
Anthony
Top achievements
Rank 1
Veteran
Answers by
Krissy
Telerik team
Anthony
Top achievements
Rank 1
Veteran
Share this question
or