CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Nixoderm
Nixoderm

Reputation: 355

Kendo Ui grid calculate and display sum of total price in the textbox

I had this simple demo that I created. Need help how to achieve this?

  1. Price value can be change based on quantity input. I want the textbox to display total sum of price. It also can be dynamic change based on quantity input in the grid.

  2. why my format {0:n2} for "2 decimal point" not working, example price is 3.00 but it only display 3 in my template column?

Working demo in dojo

Upvotes: 1

Views: 2978

Answers (1)

i.signori
i.signori

Reputation: 595

Try this

$("#totalPrice").kendoNumericTextBox({
    spinners: false,
    format: "{0:c2}",
    decimals: 2,
    restrictDecimals: true
});


   
var grid = $('#grid').kendoGrid({
  dataSource: {
    data:  [{ 'id': 'A1','quantity': 1,'price': 9.91 },
        { 'id': 'B1', 'quantity': 1, 'price': 3.00 },
        { 'id': 'C1', 'quantity': 1, 'price': 1.23 }],
    schema: {
      model: {
        id: "id",
        fields: {
          id 		: { editable: false },
           quantity : { type: "number", editable: true , validation: { min: 0 } },
           price : { type: "number", editable: true }
        }
      }
    }
  }, 
  editable: true, //"incell",
 	//editable: "incell",
  // toolbar: [{ name: "create", text: "Add" }],
  columns: [
    { field: "id", title: "id" },
    { field: "quantity", title: "quantity" },
    { field: "price",  format:"{0:c2}", editable: false },        
    { command: ["destroy"], title: " " }
  ],
  
  edit: function(e) {
  	$('[name="quantity"]').change(
      	function(){
    	 var newQuantity = parseInt($(this).val());
    	 var oldQuantity = parseInt(e.model.quantity);
    	 var oldPrice = parseFloat(e.model.price);
			 	 if (newQuantity > 0){
         if(oldQuantity > 0){
            var newPrice = ( oldPrice / oldQuantity) * newQuantity;
         } else {
            var newPrice =  oldPrice  * newQuantity;
         }
      	 e.model.set("price", newPrice);
         var oldTotalPrice = $("#totalPrice").val();
         var newTotalPrice = oldTotalPrice - oldPrice + newPrice;
         $("#totalPrice").data("kendoNumericTextBox").value(newTotalPrice);
       }
         
    });
    
  },
  dataBound: function(e) {
		var gridData = $("#grid").data().kendoGrid.dataSource.view();
   		  let total_price = 0;
		gridData.forEach(element => {
  			total_price = total_price + element.price;
			});
		$("#totalPrice").data("kendoNumericTextBox").value(total_price);
 }
  
       
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/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/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
 
  <style>
    .k-edit-form-container { width: 500px;}
    .k-popup-edit-form .k-edit-label { width: 20%; text-align: left; }
    .k-popup-edit-form .k-edit-field { width: 70%; }
    .k-popup-edit-form .k-edit-field > .k-textbox, 
    .k-popup-edit-form .k-edit-field > .k-widget:not(.k-tooltip)
    { width: 98%; }
  </style>
</head>
<body>    
  <div id="grid"></div> 
    Sum of Total Price = <input id="totalPrice" type=text />

  
  <script id="popup_editor" type="text/x-kendo-template">
		<div class="k-edit-label">
			<label for="calculation">Calculation</label>
    </div>

		<input class="k-radio" type="radio" id="RadioPercentage" name="calculation" value="percentage" /> 
		<label class="k-radio-label" style="margin: 8px 0px 5px 0px; padding-right: 40px;" for="RadioPercentage" >Percentage</label>
		<input type="text" id="percentage" class="k-input k-textbox" data-role="percentage" data-bind="value: percentage" />				

		<br>

		<input class="k-radio" type="radio" id="RadioAmount" name="calculation" value="amount" /> 
		<label class="k-radio-label" style="margin: 8px 0px 5px 0px; padding-right: 58px;" for="RadioAmount" >Amount</label>
		<input type="text" id="amount" class="k-input k-textbox" data-role="amount" data-bind="value: amount" />	  

  </script>

</body>
</html>

Upvotes: 2

Related Questions