Data grid in a form

[Sanjay]

Hi

Is it possible to submit data grid as part of the form submission process?

Case:

User adds items to data grid.

User updates other information ( such as name, address, phone number ) .

User clicks on submit button

Thanks

Sanjay

[Hariharan J V]

Hi Sanjay,  

We have bound the EJ2 Grid inside of form and you can perform CRUD operation in the EJ2 Grid. You can access the grid row data details when submit button click action using the getCurrentViewRecords method. 

Please refer the below code example and sample for more information. 

[index.cshtml] 

<div class="form-row" style="border:1px solid red; height:600px"> 

    <div class="form-group col-md-4"> 

        <div class="e-float-input e-control-wrapper"> 

            @Html.TextBox("Name") 

            <span class="e-float-line"></span> 

            @Html.Label("Name", "Name", new { @class = "e-float-text e-label-top" }) 

        </div> 

    </div> 

    <div class="form-group col-md-4"> 

        <div class="e-float-input e-control-wrapper"> 

            @Html.TextBox("Address") 

            <span class="e-float-line"></span> 

            @Html.Label("Address", "Address", new { @class = "e-float-text e-label-top" }) 

        </div> 

    </div> 

    <div class="form-group col-md-4"> 

        <div class="e-float-input e-control-wrapper"> 

            @Html.TextBox("PhoneNumber") 

            <span class="e-float-line"></span> 

            @Html.Label("Phone Number", "PhoneNumber", new { @class = "e-float-text e-label-top" }) 

        </div> 

    </div> 

 

    <div class="form-group col-md-12"> 

        <div class="e-float-input e-control-wrapper"> 

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

                <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>                 

                <e-grid-columns> 

                    .   .   .  . 

               </e-grid-columns> 

            </ejs-grid> 

        </div> 

    </div> 

 

    <div class="form-group col-md-4"> 

        </div> 

        <div class="form-group col-md-4"> 

            <div class="e-float-input e-control-wrapper"> 

                <ejs-button id="submitBtn" content="Submit"></ejs-button> 

            </div> 

        </div> 

    <script type="text/javascript"> 

        document.getElementById("submitBtn").addEventListener("click", function (args) { 

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

            var rowsDetails = grid.getCurrentViewRecords(); // get the presented grid rows   

            console.log(rowsDetails); 

 

       }) 

    </script> 

Sample link: http://www.syncfusion.com/downloads/support/forum/145166/ze/EJ2GridDTVrules-12062019-1796583682.zip 

Please get back to us, if you have any concern. 

Regards, 

Hariharan 

[Roberto]

Hi,

I have a form with many fields and I have a grid, when I submit, I need to pass all the form data and all the grid rows together to the Action, I tried the example but it didn't work.

I did not see [HttpPost] Index to receive all data.

I´m using asp core version 20.2.0.48

    $("#submitBtn").on("click", function (event) {

        event.preventDefault();

        var grid = document.getElementById("GridPedidoItem")["ej2_instances"][0];

        var rowsDetails = grid.getCurrentViewRecords(); // get the presented grid rows

        var mydata = {};

        var form = $("#myform");

        mydata.registro = myform.serialize();

        mydata.gridrows = JSON.stringify(rowsDetails);

        var actionUrl = form.attr('action');

        $.ajax({

            type: "POST",

            url: actionUrl,

            dataType: "json",

            data: mydata,

            contentType: "application/json; charset=utf-8",

            success: function (data) {

            },

            error: function (jqXHR, exception) {

            }

        });

    });

[Joseph Christ Nithin Issack]

Hi Roberto,

  Thanks for your update.

  Currently we are validating your query, we will provide further details on or before 22^nd September, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Roberto,

  We have prepared a sample by rendering the grid inside a form and tried to get the entire row in the current page of the grid when you click the submit button. We were able to get the rows without any issues. Refer the below code example:

 

<script type="text/javascript">

        document.getElementById("submitBtn").addEventListener("click", function (args) {

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

            var rowsDetails = grid.getCurrentViewRecords();

            console.log(rowsDetails);

 

            // perform ajax action here.

        })

    </script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/grid-in-form-25289277

If you still face difficulties in getting the data, share the below details.

• Complete grid rendering code.
• Explain the requirement in detail.
• Video demo to explain the requirement.