Custom Form Around a Grid Row

Correction.. i did find some documentation on the rowRender here: https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

However, it doesn't seem like I will get very far if I try to return a <Form /> inside a <tr />

Hello, John,

The Form could be placed inside the Grid, but a couple of modifications will be needed.

1) Additional styles may be required, so the form will look nice inside the Grid tr.

2) The change events have to be handled programmatically to update the Grid data when the user types inside the form.

As we are not experts in react-advanced-form, could you please share with us an example with the Form inside the row, and how it is used.

Once we observe the specifics of this form, we will be happy to modify it in order to work nicely with the Grid.

Regards,
Stefan
Progress Telerik

I think answering this question specific to react-advanced-form is needlessly complex. The same problem would exist if I were just using an html <form> element. So, say when a row is in edit mode, I want a form surrounding all the fields in a single row. Then when you click save, it submits the form for that row. Conceptually, the html that would be rendered would be something like:

 

The obvious issue with this is that you can't have a form inside a TR. So you either have to put the form around the whole grid and handle adding/removing input elements as each row changes to edit mode, or... The solution I've gone with is to define the rowRender and have it return a <tr> with a single <td> that spans all columns. inside that <td>, i define the form, including submit and cancel buttons. Doing it that way is sort of like an inline external form (instead of a modal). The drawback to this scenario is that my inputs don't align nicely with my grid columns.

Hello, John,

I`m glad to hear that the form is successfully integrated with the Grid row, and thank you for sharing it with the community it is highly appreciated.

As for the styles, an idea that comes to mind is to place the elements inside a container with the same width as the columns, this should achieve a similar to the desired result:

https://stackblitz.com/edit/react-3itmyq?file=app/main.js

Regards,
Stefan
Progress Telerik

That could work.. Thanks, I will experiment with that. The important thing to keep in mind with that solution is you'd want both the column widths and the <span> containers to resize simultaneously. So if you set the resizable prop on <Grid /> or if the window resizes, you'd want those to be in sync. if the columns are a static width, then it's not an issue.