Table of Contents
| English |
|---|
| If you have an editable column in List Grid and would like it to auto calculate and display the result in the List Grid. |
Steps
Add a Custom HTML element into the form and insert the code below.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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
//handles if user changes value more than once
if(fieldId == null){
fieldId = $(row).find("td:nth-child(4)>span");
}
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> |
Download Demo App
...