KendoReact Form - Selecting Items From A List (FieldArray?)

1 Answer 364 Views
Form
Brent
Top achievements
Rank 1
Iron
Brent asked on 27 May 2021, 09:11 PM

I have a Form in which I'd like users to be able to select zero or more items from a table.  Rows in this table should contain a checkbox, and clicking the checkbox will include or exclude the corresponding item from the Field's value.  Perhaps the value will be a comma-separated list of the IDs of all the selected items.  An array is fine too.

Let's say we're doing an online purchase form for a fast food restaurant where customers have a small catalog of products to purchase from.  Maybe this is the entire product table:

Id: 1, Name: Hamburger, Price: $5
Id: 2, Name: Fries, Price: $2
Id: 3, Name: Soda, Price $2

The user would see:

[ ] Hamburger
[ ] Fries
[ ] Soda

If the user chooses a hamburger and soda, the SelectedItems value will be "1, 3" (or hopefully [1, 3]).  The end result is that after pushing the submit button, the onSubmit event will fire with a values object like this:

{ OrderId: 1234, SelectedItems: [1, 3], PaymentMethod: "cash" }

How can I use the Forms API to achieve this?  I thought perhaps a FieldArray would help, but I didn't see any examples of that class in use.  The online docs pretty much just say that a FieldArray has a "component" property and that the component does stuff with a FieldArrayRenderProps.  No actual examples.

My two questions:

  1. How would you recommend I implement the table as described above?
  2. What is an example of a typical use of a FieldArray?

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 28 May 2021, 06:15 AM

Hello, Brent,

We have an example of our Form using FieldArray and the Grid component (table) which should prove helpful in this case:

https://www.telerik.com/kendo-react-ui/components/form/validation/#toc-fieldarray-validation

Please let me know if you have additional questions after checking the example.

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.

Brent
Top achievements
Rank 1
Iron
commented on 28 May 2021, 08:43 PM

This approach is working quite nicely! Thanks.
Tags
Form
Asked by
Brent
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Share this question
or