Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Image Modified

Steps

Add a Custom HTML element into the form and insert the code below.


Code Block
languagejs
titleCode
linenumberstrue
<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
nameAPP_calcListGrid.jwa
height250