In the datagrid edit dialog, when a field changes, another field is updated

[John Taylor]

Hi,

I am using edit mode Dialog in Datagrid. I have 2 columns named Cost and Price. Cost field editType="numericedit". However, the Price field allowsEditing="false".

When the Edit button was pressed, the Dialog screen opened. Then, when I change the Cost value, how can I ensure that Price is multiplied by 2 and its value is calculated on the dialog screen?

Br,

[Rajapandi Ravi]

Hi John,

Greetings from Syncfusion support

After reviewing your query, we could see that you like to update the cost value based on the price value column change. You can update the column value based on another column edited value by using the Cell Edit Template feature.

Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. In this below sample, we have used the cell edit template to the UnitPrice column and rendered the NumericText box component while editing. When we are changing the value from the UnitPrice column we have updated the TotalCost column value which was calculated in edited state in the dialog. Please refer the below code example and sample for more information.

 

<div class="control-section">

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

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

        <e-grid-columns>

            <e-grid-column field="UnitPrice" headerText="Unit Price" editType="numericedit" edit="@(new {create = "priceCreate", read = "priceRead", destroy = "priceDestroy", write = "priceWrite"})" width="150" format="C2" textAlign="Right"></e-grid-column>

            <e-grid-column field="TotalCost" headerText="Total Cost" width="150" allowEditing='false' format="C2" textAlign="Right"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

 

<script>

    var priceElem;

    var priceObj;

 

    function priceCreate(args) {

        priceElem = document.createElement('input');

        return priceElem;

    }

 

    function priceWrite(args) {

 

        priceObj = new ej.inputs.NumericTextBox({

            value: args.rowData[args.column.field],

            change: function (args) {         //change event of numeric textbox    

                                                                                     //Grid id + EditForm

                var formEle = document.getElementById('GridEditForm').ej2_instances[0]; //get the form element

                var totalCostFieldEle = formEle.getInputElement('TotalCost');

                totalCostFieldEle.value = priceObj.value * 2;

            }

        });

        priceObj.appendTo(priceElem);

    }

 

    function priceDestroy() {

        priceObj.destroy();

    }

 

    function priceRead(args) {

        return priceObj.value;

    }

</script>

 

Sample:

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#custom-editors-using-template

Regards,

Rajapandi R

Attachment: 184663sample_2c5d87a0.zip