Changing a value based on an input box change

[Danyelle]

I have a grid that has three fields: actual stock added stock and stock Result. In the edit dialogue when the user enters the Added stock Number I would like to add the Actual Stock and Added stock together and display it in the Stock Result Field within the dialogue box.

[Rajapandiyan Settu]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

Query: I have a grid that has three fields: actual stock added stock and stock Result. In the edit dialogue when the user enters the Added stock Number I would like to add the Actual Stock and Added stock together and display it in the Stock Result Field within the dialogue box. 

We have validated your requirement at our end. You can achieve this by using change event of NumericTextBox Component.  

Change: https://ej2.syncfusion.com/javascript/documentation/api/numerictextbox/#change 

In that event, we dynamically bind added the value of ActualStock and StockAdded fields to the StockResult field. Please find the below code example and sample for more information. 

[index.cshtml] 

@{ 

    var ActualStockParams = new Syncfusion.EJ2.Inputs.NumericTextBox() { Change = "ActualStockChange" }; 

    var StockAddedParams = new Syncfusion.EJ2.Inputs.NumericTextBox() { Change = "StockAddedChange" }; 

} 

 

@Html.EJS().Grid("DialogEditing").DataSource((IEnumerable<object>)ViewBag.DataSource2).Columns(col => 

   { 

 

       col.Field("UnitID").HeaderText("Unit ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true, number = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

       col.Field("DnName").HeaderText("Dn Name").Width("150").Add(); 

       col.Field("ActualStock").HeaderText("Actual Stock").Width("120").Edit(new { @params = ActualStockParams }).EditType("numericedit").ValidationRules(new { required = true }).Add(); 

       col.Field("StockAdded").HeaderText("Stock Added").Width("120").Edit(new { @params = StockAddedParams }).EditType("numericedit").ValidationRules(new { required = true }).Add(); 

       col.Field("StockResult").HeaderText("Stock Result").Width("120").AllowEditing(false).EditType("numericedit").ValidationRules(new { required = true }).Add(); 

 

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

<script> 

    function ActualStockChange(args) { 

        var StockResultIns = document.getElementById('DialogEditingStockResult').ej2_instances[0]; // get the instance of StockResult input 

        var ActalStockIns = document.getElementById('DialogEditingActualStock').ej2_instances[0];  // get the instance of ActualStock input 

        var StockAddedIns = document.getElementById('DialogEditingStockAdded').ej2_instances[0];   // get the instance of StockAdded input 

 

        StockResultIns.value = ActalStockIns.value + StockAddedIns.value; // bind added value to the StockResult input 

    } 

    function StockAddedChange(args) { 

        var StockResultIns = document.getElementById('DialogEditingStockResult').ej2_instances[0]; // get the instance of StockResult input 

        var ActalStockIns = document.getElementById('DialogEditingActualStock').ej2_instances[0];  // get the instance of ActualStock input 

        var StockAddedIns = document.getElementById('DialogEditingStockAdded').ej2_instances[0];   // get the instance of StockAdded input 

 

        StockResultIns.value = ActalStockIns.value + StockAddedIns.value; // bind added value to the StockResult input 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_dialog_editing-1925992021.zip 

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

Regards,  

Rajapandiyan S