We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Data grid in a form

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




1 Reply

HJ Hariharan J V Syncfusion Team June 12, 2019 11:40 PM

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> 


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

Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon