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

Calculate edit control values in edit mode

Scenario: editable grid (EditMode.Normal) with three columns (identity column is assumed):
  • Hourly Rate (read-only)
  • Hours Worked (editable as follows: EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }) )
  • Bill Amount (editable as follows: EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }) )
When the user edits this row, the user can edit the Hours Worked OR the Bill Amount.  The desired outcome is to calculate the other field using the Hourly Rate.

Use Case 1: The Hourly Rate is $50 and the user changes the Hours Worked to 7.  At this point the Bill Amount edit control value should automatically update to $350 BEFORE the save button is clicked.

Use Case 2: The Hourly Rate is $50 and the user changes the Bill Amount to $400.  At this point the Hours Worked edit control value should automatically update to 8 BEFORE the save button is clicked.


5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 27, 2017 03:54 AM UTC

Hi James, 

Thanks for contacting Syncfusion support. 

Query: Need to change the value of one column, while editing the other column value dynamically. 

We have analyzed your query and we suspect that you need to edit the value dynamically while change or edit the other column value. 

We have achieved your requirement using the actionComplete event of ejGrid and change event of ejNumericTextbox control. In sample while changing the EmployeeID column value, we can change the Freight column value using the change event of ejNumericTextbox control and for changing the Freight column value, it will change the EmployeeID column value. 

Refer the below code example. 


@(Html.EJ().Grid<object>("FlatGrid") 
         
        .ClientSideEvents(ce=> { ce.ActionComplete("complete"); }) 
        .AllowPaging()    /*Paging Enabled*/ 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
        .ToolbarSettings(toolbar => 
        { 
          -------------- 
        }) 
        .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
 
            col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Numeric).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("Freight").HeaderText("Freight").EditType(EditingType.Numeric).TextAlign(TextAlign.Right). 
Width(75).Format("{0:C}").Add(); 
          
 
        })) 
</div> 
<script type="text/javascript"> 
    function complete(args) { 
        debugger 
        if (args.requestType == "beginedit" || args.requestType == "add" ) { 
 
            $("#FlatGridEmployeeID").ejNumericTextbox({ value: $("#FlatGridEmployeeID").val(),  
change: "Numerichange" }); // Bind the change event for the EmployeeID column numeric text box 
  
            $("#FlatGridFreight").ejNumericTextbox({ value: $("#FlatGridFreight").val(),  
change: "CurrencyChange" }); // Bind the change event for the freight column numeric text box 
        } 
    } 
    
    function CurrencyChange(args) { 
         
        var freight = $("#FlatGridFreight").val(); // get the changed freight column value 
 
        var total = freight / 50; // calculation for the EmployeeID column value 
 
        $("#FlatGridEmployeeID").ejNumericTextbox({value: total});  // Change the EmployeeID column valuw according to the Freight value changed 
 
 
    } 
    function Numerichange(args) { 
 
         var employeeID = $("#FlatGridEmployeeID").val();  // get the changed freight column value 
         
        var total = employeeID * 50; // calculation for the freight column value 
         
        $("#FlatGridFreight").ejNumericTextbox({ value: total }); // Change the freight column valuw according to the EmployeeID value changed 
 
    } 
</script> 
 

We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 




If we misunderstood your query, then please get back to us. 

Regards, 
Thavasianand S. 



JE jestc May 15, 2017 02:11 PM UTC

Is this possible if these columns are in a child grid?


TS Thavasianand Sankaranarayanan Syncfusion Team May 16, 2017 05:03 PM UTC

Hi James, 
 
We have analyzed your query and we suspect that you want to do the dynamically change the values in child grid also. 
 
As per your requirement we have prepared a sample with hierarchical grid, dynamically change the value of other columns in child grid and it can be downloadable form the below location. 
 
 
Refer the help documentation. 
 

Regards, 
Thavasianand S.


JE jestc May 22, 2017 01:36 PM UTC

That worked perfectly... thank you!


TS Thavasianand Sankaranarayanan Syncfusion Team May 23, 2017 04:19 AM UTC

Hi James, 

We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon