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