Show (Display) Column Total in KendoGrid Footer in AngularJS

rani
 
on Feb 26, 2020 11:56 PM
Sample_249234.zip
1639 Views

Calculate and show column total in kendogrid footer in angularjs

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 27, 2020 05:13 AM

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