Post full content of grid back to controller on Submit and DropDown

[RJ]

Hi I'm quite new to Syncfusion controls and am using a grid with a dropdown box as an order sheet were the user can add as many rows as they want which I then want to post to the controller to add these rows to the database. I'm not sure if there is a way to bind the rows to a model property or if you have to pass them as JSON either is fine. I dont want to use CRUD as I want to group all the SQL in one transaction to rollback if there is an error as it will involve multiple tables and multiple rows as the app matures during development.

My issue is how do I post the content of the table back to the controller. I need the MealID from the dropdown box, not the meal Name as meal ID is the foreign key, as well as the quantity and batch number so have I set the drop down up correctly to display the name to the user, Text, but store the Value? I have included a few pieces of code. For clarification the grid will be empty on load and the user will then add data, the dropdown is populated with data from a table in the database.

Attachment: Grid_Code_c43435b9.zip

[Shalini Maragathavel]

Hi Ross, 

Thanks for contacting Syncfusion support. 

We checked the attached screenshots and found that you have used foreignKey column in the Grid. In your update we suspect that you need to send the added rows to the controller for saving the records in database. 

If so we have built-in support for data Adaptors UrlAdaptor ,RemoteSave Adaptor, etc., and each adaptor uses different way in accepting request and sending back the response by DataManager.

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-data 

 

In this you also mentioned that you need to use CRUD operation in the grid, but in your attached screenshot we suspect that you have added record in the Grid. So, before we proceed with your query we need the following details,  

1. Do you need to add more than one records in the Grid and need to send all the added records information in the Grid to the server ?  

2. Are you adding records to the Grid using an external(Add Meal) button? 

3. Explain your requirement in detail with pictorial or video demonstration. 

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[RJ]

Hi Thank you for your reply.

Ok I will have a look into the data adaptors documentation and I do not want to use CRUD as part of this operation.

1.Yes the user will add more than one record to the grid and will likely be multiple records. Once they have added all the records as explained above I want to post all the rows back to the controller

2.No they user uses the button at the top of the grid to add a new row to the grid (the Add Meal External button was poorly named but was meant to represent a submit button for the whole view has been changed to Complete Delivery Button)

3.I would like to load this view and the user to select a date, then enter a list of records into the data grid using the add, edit, delete, update, cancel buttons on the top of the grid. Then when the user is finished they click the complete delivery button and the model with the date field and all rows added to the grid will be posted back to the controller to be saved in the database. The important bit is that all the rows data comes back to the controller. I had used foreign key as I want the meal name to be displayed to the user but I need the MealID to save in the data base as the table I am using uses MealID, Quantity and Batch/InvoiceNumber.

I hope this makes sense

Regards,

Ross

Attachment: ViewUpdated_d7be3aea.zip

[Shalini Maragathavel]

Hi Ross, 

Thanks for sharing the details. 

From the shared information we still not able to understand your requirement clearly. In the shared details you have mentioned that you do not want to use the Grid’s CRUD action. In this you also mentioned that you need to enter a list of records into the data grid using the add, edit, delete, update, cancel buttons on the top of the grid. So, we suspect that you need to add or edit or delete the records using the grid toolbar 

 

By default in EJ2 Grid you can add/edit/delete/update records in the Grid only when we enabled CRUD actions in the Grid by using its editSettings property.

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/

Before proceeding further please share us the following information to understand your requirement better, 

1. Do you need to send all the added records to server using complete delivery button. 

2. Do you need to display the records in the Grid once the records updated in database or once records displayed in the Grid after that you need to save all the records in the database. 

3. If you do not want to use CRUD operation then how we need to remove the added records? 

4. If possible share the video demonstration of your requirement 

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[RJ]

Hi Thanks for your reply again.

To Answer your questions,

1. Yes when the user clicks the add delivery button I want to pass all the records in the grid to the server

2. No I am purely using the grid as a easy way for the user to add an unknown number of records to the list in the grid then pass them all to the server once the user has completed adding all meals they want to add.

3. I dont really want to use CRUD as the information in the grid is linked to many different tables and relies on information being created based on the delivery date to be added. So I want the grid to just hold the information on screen then send it to the server when the external button is clicked. I do not need to delete any records or update any records and they will not be displayed on this view again, this view is purely for adding meals and I had just taken a copy of examples in other forms and documentation to create the grid so that is why there are extra buttons on the view.

All I really need the grid to do is act as a nice container to hold the information the user inputs in the browser and then send it back to the server when the view is submited then my SQL and Database will take care of the rest

Kind Regards,

Ross

[Shalini Maragathavel]

Hi Ross, 

Thanks for sharing the details. 

Based on your query we suspect that you need to send all the added records in the Grid to the server on external button click. You can achieve your requirement of sending all the added records to the server using an AJAX call as demonstrated in the below code snippet, 

Index.cshtml 

 

<button onclick="myFunction()">COMPLETE DELIVERY</button> 

<ejs-grid id="Grid" dataSource="ViewBag.dt" allowPaging="true"  actionComplete="actionComplete" height="315"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-grid-columns> 

        . . .         

 

    </e-grid-columns> 

 

</ejs-grid> 

<script> 

    var arr = []; 

    function actionComplete(args) { 

        if (args.requestType === 'save') {  

            arr.push(args.data);  //added records 

        } 

    } 

    function myFunction() { 

        

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

        

        let ajax = new ej.base.Ajax({ 

            url: "/Home/CommandColumnHanlde", 

            data: JSON.stringify(arr  ), 

            type: 'POST', 

            contentType: 'application/json' 

        }); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

            grid.dataSource = []; 

        }; 

       

    } 

 

</script> 

 

homecontroller.cs 

 

  public string CommandColumnHanlde([FromBody] List<OrdersDetails> value) 

        { 

          . . . 

       } 

Please refer the sample for more information. 

Sample: https://www.syncfusion.com/downloads/support/forum/163392/ze/filter_core1545031474.zip 

Let us know if you have any concerns.


Regards,
Shalini M.