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.
Unfortunately, activation email could not send to your email. Please try again.

Calculate edit control values in edit mode

Thread ID:

Created:

Updated:

Platform:

Replies:

129532 Mar 23,2017 04:50 PM May 23,2017 12:19 AM ASP.NET MVC 5
loading
Tags: Grid
jestc
Asked On March 23, 2017 04:50 PM

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.


Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 26, 2017 11:54 PM

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. 


jestc
Replied On May 15, 2017 10:11 AM

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 16, 2017 01:03 PM

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.

jestc
Replied On May 22, 2017 09:36 AM

That worked perfectly... thank you!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 23, 2017 12:19 AM

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. 


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.

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.

;