Auto calculate values on the List Grid

Introduction

The auto-calculation feature in the List Grid within Joget forms allows for dynamic and real-time data computation, enhancing applications' functionality and interactivity. This feature is essential for forms with editable columns that require automatic updates based on user input, simplifying calculations such as totals from quantities and amounts. Integrating a simple JavaScript code into a Custom HTML element in your form allows the List Grid to display calculated results, reducing errors and saving time instantly.

How does it work?

 For a practical example of setting up this feature, see the steps outlined below:

1. Download the demo app, which includes features like EnjoyHint for customizable hints and an example of auto calculation in a List Grid.
2. Add a Custom HTML element to your form. This will serve as a container for the JavaScript required for auto calculations.
3. Insert the following JavaScript code into the Custom HTML element. This code will detect changes in the List Grid and automatically compute and display the calculated results.
   

   <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(3) span span").text(); // quantity
                           secondColumnValue = $(row).find("td:nth-child(4) 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(5)>span>span").attr("column_key"); // total
                               
                               //handles if user changes value more than once 
                               if(fieldId == null){
                                   fieldId = $(row).find("td:nth-child(5)>span"); 
                               }
                           
                               if(fieldId){
                                   obj[fieldId] = value;
                                   newJson = JSON.stringify(obj);
                                   $(row).find("textarea").val(newJson);
               
                                   //update visible column value
                                   $(row).find("td:nth-child(5)>span").text(value); // total
                               }
                           }
                     }                  
               });
           });
   </script>

Download sample app