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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data grid in a form

Thread ID:

Created:

Updated:

Platform:

Replies:

145166 Jun 11,2019 12:37 AM UTC Jun 13,2019 04:40 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
Sanjay
Asked On June 11, 2019 12:37 AM UTC

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 [Syncfusion]
Replied On June 13, 2019 04:40 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon