If you have editable columns in List Grid and would like it to auto calculate and display the result in the list grid. Add the following script into a CustomHTML within the same form as the list grid.
- Add a Custom HTML element into the form and insert the code below.
Code
<script>
$(function() {
//calculate
$(".grid.form-element").change( function(){
var cell = $(this).find(".hover");
var row = $(cell).parents("tr");
if($(row).find("td")){
firstColumnValue = $(row).find("td:nth-child(2) span span").text(); // quantity
secondColumnValue = $(row).find("td:nth-child(3) span span").text(); //amount
//perform computation
value = firstColumnValue * secondColumnValue; // total = amount x quantity
if(!isNaN(value)){
//update hidden json definition
json = $(row).find("textarea").val();
obj = eval("["+json+"]")[0];
fieldId = $(row).find("td:nth-child(4)>span>span").attr("column_key"); // total
if(fieldId){
obj[fieldId] = value;
newJson = JSON.stringify(obj);
$(row).find("textarea").val(newJson);
//update visible column value
$(row).find("td:nth-child(4)>span").text(value); // total
}
}
}
});
});
</script>
