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

Question

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

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.
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?

Answer 1

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: "&nbsp;" } ], 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>

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

Question

1 answers

solution1
2 ACCPTED 2020-01-07 12:08:04

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

Question

1 answers

solution1 2 ACCPTED 2020-01-07 12:08:04

solution1
2 ACCPTED 2020-01-07 12:08:04