Display (Show) sum of Columns total (Grand Total) in KendoGrid footer in AngularJS

rani
 
on Feb 27, 2020 11:10 PM
Sample_947461.zip
3989 Views

How to display total in kendogrid footer while typing in textbox in angularjs

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 02, 2020 07:41 AM
on Mar 02, 2020 07:48 AM

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