Passing value from input to datagrid

[Titus]

Hello, I want to create a grid which takes customername value from an input every time I add a new address, and then save all the addresses with the same customername together as a batch.

This is what I have tried to so far:



<
input id="customerName"asp-for="Customer.Name"class="form-control"placeholder="Masukkan nama perusahaan..."/>

<ejs-grid id="Grid"load="onLoad"batchAdd="batchAdd"allowPaging="true"allowFiltering="true"allowSorting="true"
                                 toolbar="@(new List() { "Search","Add","Edit","Delete","Update","Cancel"})">

                        <e-data-managerurl="/Customers/Create?handler=DataSource"
                                             batchUrl="/Customers/Create?handler=BatchUpdate"
                                             adaptor="UrlAdaptor">e-data-manager>

                        <e-grid-editSettingsallowAdding="true"allowDeleting="true"allowEditing="true"mode="Batch">e-grid-editSettings>

                        <e-grid-columns>
                            <e-grid-column      field="Id"
                                                editType='dropdownedit'
                                                edit="@(new { create="provinceCreate",read="provinceRead",destroy="provinceDestroy",write="provinceWrite"})"
                                                headerText="Province"width="140">e-grid-column>

                            <e-grid-columneditType='dropdownedit'
                                                edit="@(new { create="cityCreate",read="cityRead",destroy="cityDestroy",write="cityWrite"})"
                                                headerText="City"width="140">e-grid-column>

                            <e-grid-columneditType='dropdownedit'edit="@(new { create="subdistrictCreate",read="subdistrictRead",
                                destroy="subdisrictDestroy",write="subdistrictWrite"})"headerText="Subdistrict"width="140">e-grid-column>
                            <e-grid-columneditType='dropdownedit'edit="@(new { create="villageCreate",read="villageRead",destroy="villageDestroy",
                                write="villageWrite"})"headerText="Village"width="140">e-grid-column>

                            <e-grid-columnfield="StreetName"headertext="street name"width="140">e-grid-column>
                            <e-grid-columnfield="CustomerName"width="140"edit="@(new {create="customerNCreate",read="customerNRead",destroy="customerNDestroy",write="customerNWrite"})">e-grid-column>
                        e-grid-columns>
                    ejs-grid>

<-- Script -->

function batchAdd(args) {

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

args.rowData['CustomerName'] = document.getElementById('customerName').value;

}

}

[Rajapandiyan Settu]

Hi Titus,

Thanks for contacting Syncfusion support.

Based on your requirement you want to bind the default value on the CustomerName column based on other input elements (placed outside of the Grid) while adding a new row in Grid. You can achieve this by using beforeBatchAdd event of Grid.

beforeBatchAdd: https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforebatchadd

 

    function beforeBatchAdd(args){

        args.defaultData['CustomerID'] = document.getElementById('customerName_default').value;

    }

 

If you want to change the value before saving the data, you can achieve this by using beforeBatchSave event.

beforeBatchSave: https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforebatchsave

 

    function beforeBatchSave(args){

        console.log(args.batchChanges);

        if (args.batchChanges.addedRecords.length > 0) { // get the batch changes record

            for (var i = 0; i < args.batchChanges.addedRecords.length; i++) {

                // change the data as you want

                args.batchChanges.addedRecords[i]['CustomerID'] = 'Modified Text';

            }

        }

    }

 

Find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_batch-658960929.zip

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S