| 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. |
Image Added
Steps
Add a Custom HTML element into the form and insert the code below. list grid. Add the following script into a CustomHTML.Image Removed
| Code Block |
|---|
| language | js |
|---|
| title | Code |
|---|
| linenumbers | true |
|---|
|
<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
Download the demo app with examples of using EnjoyHint. It also includes customizable hints from a lookup table as well.
| View file |
|---|
| name | APP_calcListGrid.jwa |
|---|
| height | 250 |
|---|
|