Add/Edit Flows - Need to submit/save form with input fields (belong to parent record) and more than 1 grid(all children to parent data) to server

[Rajesh]

Hi All,

I have used below mvc helpers + odata based grid sample to create grid with crud operation with odata 4, and able to get it working.

grid - based on mvc 5 with odata 4

 

I have to now take it to next level, where in i will have a form with few inputs fields(they all will belong to a parent record/row in parent table),

and same form will have multiple grids with crud(each grid saves to its own table on full form save, and each of these tables are children to parent table).

 

For this I was looking for such sample/directions using telerik mvc helper + odata, where in we can save complete form having grid as child record and few input fields as master/parent record and save them in one go when form is saved.

Until full form is saved, we shall still be able to save/edit/delete grid rows somewhere temporarily and then shall be able to related this temp data of grid to master details(inputs fields in form) during save.

 

Form is like this:

Form - here table 1 is parent table, and table 2 is child to it, related by parent id of parent

• parent id - read only - autogenerated when full form is saved(i.e. parent is saved)
• name - will save into table1
• grid to save contacts - save all rows to table 2
• save button - button to save full form broken into 2 tables - first parent data/fields into table 1, then grid rows in table 2 mapped with parent id

Tech used:

Asp.net mvc 5 - for UI

Web api 2.2 with Odata - for grids crud (we don't want grid to be directly bound to server model rather they will use transport and will make use of api url for crud)

Data layer - EF code first (can say any ef based layer to save entities to db when full form is saved)

 

Could anyone of you please help and share any link to such sample to save parent fields from form with at least 1 child gird in one go.

Using mvc helpers + web api (better if we can have with odata, otherwise without odata is also ok but web api is must to bind grids to)

References already gone through:

http://www.telerik.com/support/code-library/submit-form-containing-grid-along-with-other-input-elements - doesn't fit as grid is bound to server sid emodel but we want to use web api url for grid's crud

 

Thank you.

[Konstantin Dikov]

Hello Rajesh,

Can you please elaborate why you need to allow the CRUD operations for the Grid helpers trough AJAX if you need to post and save the data for all editors and Grids along with the form? When you disable the server operations of the Grid's DataSource all CRUD operations will be performed on the client, so you do not need to preserve the changes. However, if you want to retrieve the information for the entire form you will have to do this manually, especially since you are not using any model for the Form and the Grid.

For retrieving the data items collection of the Grid helpers you could use the items method:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-items

As for the binding of the Grids, you can either initialize them on client-side, use AJAX binding or set the data source manually after retrieving the data:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration 
• http://demos.telerik.com/kendo-ui/grid/local-data-binding 
• http://demos.telerik.com/aspnet-mvc/grid/remote-data-binding

You can also take a look at the following demo for hierarchical grids:

• http://demos.telerik.com/aspnet-mvc/grid/hierarchy

Best Regards,
Konstantin Dikov
Telerik by Progress