Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
Table of Contents
If you have an editable columns column 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.List Grid.
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 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 the demo app with examples of using EnjoyHint. It also includes customizable hints from a lookup table as well.
View file | ||||
---|---|---|---|---|
|