javascriptjquerykendo-uikendo-gridkendonumerictextbox

How can I sum multiple Numeric textbox value?

I have multiple Numeric textbox as shown below in the snippet, all are currency format textbox's. How can I sum the values of textboxes in Class Name Charges and display the total sub-total-Of-Charges textbox and subtract if any value in textbox's with class=sub from sub-total-Of-Charges textbox value.

I have used the following jQuery Code which is working but two problems.

  1. Doesn't Keep the currency format

  2. the value of net-invoiced-amount is updated only when I update textbox value in textbox class .sub same thing .sub-total-Of-Charges value is updated on .Charges are updated but I need to re-calculate or update the value net-invoiced-amount or .sub-total-Of-Charges whenever .sub or .charges textbox's values are changed.

    $(document).ready(function () {
 $(document).on("change", ".charges", function () {
     var calculated_total_sum = 0;

     $(".charges").each(function () {
         var get_textbox_value = $(this).val();
         if ($.isNumeric(get_textbox_value)) {
             calculated_total_sum += parseFloat(get_textbox_value);
         }
     });
     $(".sub-total-Of-Charges").val(calculated_total_sum);
 });

    $(document).on("change", ".sub", function () {

         var netInvoicedAmount = $(".sub-total-Of-Charges").val();

     $(".sub").each(function () {
         var get_textbox_value = $(this).val();
         if ($.isNumeric(get_textbox_value)) {
             netInvoicedAmount -= parseFloat(get_textbox_value);
         }
     });
     $(".net-invoiced-amount").val(netInvoicedAmount).trigger("change");
 });

    });

Solution

  • You need to get reference of textbox where you need to set the updated value using data("kendoNumericTextBox") and then set new value using .value("newwvalue") this will update new value according to the format which you have set earlier .

    Also , use $(this).attr("aria-valuenow") to get the original value of textbox without any currency and change your selector to $(".k-formatted-value.charges") to get only input value from particular textbox .Currently , when you will inspect html generated it has 2 input box with same class that's the reason total sum is not working.

    Demo Code :

    $("#TotalDirectLaborCharges, #TotalIndirectLaborCharges, #TotalContractCharges, #TotalTravelCharges, #TotalAdjustments, #TotalAdjustments, #CostsAlreadyPaid, #Other, #NetInvoicedAmount ,#SubtotalOfCharges").kendoNumericTextBox({
  decimals: 2,
  format: "c"
});

//add both selector
$(document).on("change", ".charges,.sub", function() {

  var calculated_total_sum = 0;
  $(".k-formatted-value.charges").each(function() {
    //get original value without currecny
    var get_textbox_value = $(this).attr("aria-valuenow");
    if ($.isNumeric(get_textbox_value)) {
      calculated_total_sum += parseFloat(get_textbox_value);
    }
  });
  //get kendo textbox
  var numerictextbox = $("#SubtotalOfCharges").data("kendoNumericTextBox");
  //set value
  numerictextbox.value(calculated_total_sum);


});
//add both selector
$(document).on("change", ".sub ,.charges", function() {
  //get value from inputbox
  var netInvoicedAmount = $("#SubtotalOfCharges").data("kendoNumericTextBox").value();
  $(".k-formatted-value.sub").each(function() {
    //get original value
    var get_textbox_value = $(this).attr("aria-valuenow");
    if ($.isNumeric(get_textbox_value)) {
      netInvoicedAmount -= parseFloat(get_textbox_value);
    }
  });
  //set value in invoice amt
  var numerictextbox = $("#NetInvoicedAmount").data("kendoNumericTextBox");
  numerictextbox.value(netInvoicedAmount);

});
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">



<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>

<div class="quarter m-l-lg m-y text-right">

  <label class="m-r-lg required" asp-for="TotalDirectLaborCharges">Total Direct Labor Charge<br /></label>
  <input id="TotalDirectLaborCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalIndirectLaborCharges">TotalIndirectLaborCharges<br /></label><br />

  <input id="TotalIndirectLaborCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalContractCharges">TotalContractCharges</label><br />

  <input id="TotalContractCharges" class="charges" /><br />

  <label class="m-r-lg required" asp-for="TotalTravelCharges">TotalTravelCharges</label><br />

  <input id="TotalTravelCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalAdjustments">TotalAdjustments</label><br />

  <input id="TotalAdjustments" class="sub" /><br />

  <label class="m-r-lg required" asp-for="CostsAlreadyPaid">CostsAlreadyPaid</label><br />

  <input id="CostsAlreadyPaid" class="sub" /><br />
  <label class="m-r-lg required" asp-for="Other">Other</label><br />

  <input id="Other" class="sub" /><br />
  <label class="m-r-lg required" asp-for="SubtotalOfCharges">SubtotalOfCharges</label><br />

  <input id="SubtotalOfCharges" readonly class="sub-total-Of-Charges" />

  <br />

  <label class="m-r-lg required" asp-for="Other">NetInvoicedAmount</label><br />

  <input id="NetInvoicedAmount" readonly class="netInvoicedAmount" />

</div>