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 () {
   
       $(document).on("input change", ".grid-cell-input input", function () {
   
           var row = this.closest("tr");
           if (!row) {
               return;
           }
   
           // Column indexes (0-based)
           var qtyTd    = row.children[2]; // quantity (input)
           var amountTd = row.children[3]; // amount (span)
           var totalTd  = row.children[4]; // total
   
           // Quantity (input)
           var qtyInput = qtyTd.querySelector(".grid-cell-input input");
           var quantity = qtyInput ? parseFloat(qtyInput.value) : 0;
   
           // Amount (readonly span)
           var amountSpan = amountTd.querySelector("span span");
           var amount = amountSpan ? parseFloat(amountSpan.textContent) : 0;
   
           var total = quantity * amount;
           if (isNaN(total)) {
               return;
           }
   
           // Hidden JSON
           var textarea = row.querySelector("textarea");
           if (!textarea || !textarea.value) {
               return;
           }
   
           var obj;
           try {
               obj = JSON.parse(textarea.value);
           } catch (e) {
               console.error("Invalid JSON", e);
               return;
           }
   
           // column_key for total
           var keyEl = totalTd.querySelector("[column_key]");
           if (!keyEl) {
               return;
           }
   
           var fieldId = keyEl.getAttribute("column_key");
           if (!fieldId) {
               return;
           }
   
           // Update JSON
           obj[fieldId] = total;
           textarea.value = JSON.stringify(obj);
   
           // Update visible total
           var totalInput = totalTd.querySelector(".grid-cell-input input");
           if (totalInput) {
               totalInput.value = total;
           }
       });
   
   });
   </script>

Video Tutorial

Download sample app