Hi rani,
Refer below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", ["kendo.directives"]);
app.controller("MyController", function ($scope, $window, $http) {
$scope.mainGridOptions = {
dataSource: {
data: [{ Name: "Chai", Price: 18.00, Quantity: 1 },
{ Name: "Chang", Price: 19.09, Quantity: 1 },
{ Name: "Aniseed Syrup", Price: 10.00, Quantity: 1 },
{ Name: "Alice Mutton", Price: 39.55, Quantity: 1}]
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price", format: "{0:n}" },
{ field: "Quantity", title: "Quantity", footerTemplate: "Total : ",
template: function (dateItem) {
return "<input type='text' value='" + dateItem.Quantity + "' class='k-textbox' ng-keyup='CalculateTotal($event,this)'/>";
}
},
{
title: "Total",
template: "<span class='totalSpan'>#= CalculateAllTotal(data) #</span>",
footerTemplate: "<span class='grandTotalSpan'></span>",
editable: false
}
],
dataBound: onDataBound
};
$scope.CalculateTotal = function (e, item) {
var quantity = e.currentTarget.value;
var price = item.dataItem.Price;
$(e.target).closest("tr").find('.totalSpan').html(price * quantity);
var grandTotal = 0;
var grid = $("#tblProducts").data("kendoGrid");
$(grid.tbody).find('tr').each(function () {
grandTotal += parseFloat($(this).find('.totalSpan').html());
});
$(grid.footer).find('.grandTotalSpan').html(grandTotal);
}
})
function CalculateAllTotal(dataItem) {
var total = dataItem.Price * dataItem.Quantity;
return total;
}
function onDataBound(arg) {
var datalength = arg.sender.dataSource.data().length;
var totalsum = 0;
if (datalength > 0) {
for (var i = 0; i < datalength; i++) {
var price = arg.sender.dataSource.data()[i].Price;
var quantity = arg.sender.dataSource.data()[i].Quantity;
totalsum += parseFloat(price) * parseFloat(quantity);
}
}
$("#tblProducts").data("kendoGrid").footer.find('.grandTotalSpan').html(totalsum);
}
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid options="mainGridOptions" id="tblProducts"></kendo-grid>
</body>
</html>
Demo
