Hi rani,
Check the below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</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 },
{ Name: "Chang", Price: 19.00 },
{ Name: "Aniseed Syrup", Price: 10.00 },
{ Name: "Alice Mutton", Price: 39.00}],
aggregate: [{ field: "Price", aggregate: "sum"}]
},
columns: [
{ field: "Name", title: "Name", footerTemplate: "Total : " },
{ field: "Price", title: "Price", footerTemplate: "#: sum #" }
]
};
})
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid options="mainGridOptions"></kendo-grid>
</body>
</html>
Demo
